这是一款效果超酷的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方法,所以如果隐藏侧边栏是打开的,再次点击时,隐藏侧边栏将被关闭。