这是一款效果超酷的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方法,所以如果隐藏侧边栏是打开的,再次点击时,隐藏侧边栏将被关闭。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!