jQuery和css3超酷页面3d倾斜打开隐藏侧边栏特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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

注意：该隐藏侧边栏插件已经在Chrome, Firefox, Safari的桌面和移动设备浏览器测试通过，IE浏览器上还未做过测试。

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。