菜单导航-页面3D倾斜打开隐藏侧边栏特效 | 蓝文资源库

这是一款效果超酷的jQuery和css3页面3d倾斜打开隐藏侧边栏特效插件。该插件的灵感来自于AirBnb网站的ios7 app应用的侧边栏效果。为了使动画效果过渡更加平滑自然，该插件中使用css3和jQuery共同制作。

HTML结构

要使用这个隐藏侧边栏插件，需要在html的头部引入jQuery和jQuery.fly_sidemenu.js以及fly_sidemenu.css文件。

<body>
  ..
  <ul class="sidemenu">
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
  </ul>
  ..
</body>

上面的在.sidemenu无序列表中的列表项是隐藏菜单的菜单项。

JAVASCRIPT

通过下面的jQuery代码来调用插件：

$(".sidemenu").fly_sidemenu({
    btnContent: "=",.
    position: "left",
    customSelector: "li",
    hideButton: false
});

该隐藏侧边栏插件将自动隐藏侧边栏的内容，并在页面上生成一个主菜单按钮。

下面是一些可用的参数：

btnContent：该参数用于定义自动生成的主菜单按钮的图标。该参数可以使用字符串或html标签。默认值是”=”。
position：该参数用于设置侧边栏菜单出现的方向。可用选项为：left, right, top 和 bottom。默认值为”left”。

customSelector：如果你不喜欢使用无序列表作为侧边栏菜单，你可以通过该参数自定义一个CSS选择器。例如，如果你的html结构如下：

<body>
  ..
  <nav class="sidemenu">
    <div><a href="#">BucketListly</a></div>
    <div><a href="#">MyColorScreen</a></div>
    <div><a href="#">The Pete Design</a></div>
    <div><a href="#">Free jQuery Plugins</a></div>
    <div><a href="#">My Blog</a></div>
  </nav>
  ..
</body>

那么这个参数可以设置为div，它将覆盖默认的CSS选择器li。

hideButton：该参数用于设置是否让插件自动生成主菜单按钮。设置为true则自动生成。

公共方法

$.fn.toggleMenu()

你可以通过调用toggleMenu()方法来显示隐藏侧边栏。

$(".sidemenu").toggleMenu();

通过这个方法你可以自定义按钮来触发显示隐藏侧边栏的行为。因为这是一个toggle方法，所以如果隐藏侧边栏是打开的，再次点击时，隐藏侧边栏将被关闭。

在线预览网盘下载

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

HTML结构

JAVASCRIPT

公共方法

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复