当前位置:主页 > 网页特效 > 菜单导航 >

jQuery和css3超酷页面3d倾斜打开隐藏侧边栏特效

发布时间:2018/07/04 来源:互联网 浏览: 关键词:jquery 3D CSS3 菜单导航 侧边栏 
jQuery和css3超酷页面3d倾斜打开隐藏侧边栏特效 jQuery和css3超酷页面3d倾斜打开隐藏侧边栏特效
阿里云

简要教程

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

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

HTML结构

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

<body>
  ..
  <ulclass="sidemenu">
    <li><ahref="...">...</a></li>
    <li><ahref="...">...</a></li>
    <li><ahref="...">...</a></li>
    <li><ahref="...">...</a></li>
    <li><ahref="...">...</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>
      ..
      <navclass="sidemenu">
        <div><ahref="#">BucketListly</a></div>
        <div><ahref="#">MyColorScreen</a></div>
        <div><ahref="#">The Pete Design</a></div>
        <div><ahref="#">Free jQuery Plugins</a></div>
        <div><ahref="#">My Blog</a></div>
      </nav>
      ..
    </body>
  • 那么这个参数可以设置为div,它将覆盖默认的CSS选择器li。
  • hideButton:该参数用于设置是否让插件自动生成主菜单按钮。设置为true则自动生成。
  • 公共方法

$.fn.toggleMenu()

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

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

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

共有人阅读,期待你的评论!评论
Top