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