浙江 杭州

jQuery高仿真移动手机滑动侧边栏布局插件

系统分类: 网页特效 - jquery插件 - jQuery菜单导航 2016-08-29

人气19032

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


jQuery.mmenu是一款高仿真移动手机滑动侧边栏效果的jQuery插件。该jQuery插件能够制作出和手机应用程序效果完全相同的隐藏滑动侧边栏和多级菜单效果。它的特点有:

  • 滑动侧边栏可以放置在页面的上下左右四个位置。
  • 可以作为水平滑动菜单或垂直下拉菜单使用。
  • 整个布局包括完整的搜索框,页面头部,脚部和内容区域。
  • 适合移动触摸设备使用。
  • 可以很容易的通过CSS文件来自定义样式。
  • 可以在现代浏览器和移动手机设备中正常运行。

手机滑动侧边栏效果

使用方法

使用这个滑动侧边栏布局插件首先要引入jQuery、jquery.mmenu.js和jquery.mmenu.css文件。

<link type="text/css" rel="stylesheet" href="mmenu.css" />
<script src="jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mmenu.js"></script>                
              
HTML结构

这个滑动侧边栏布局的基本HTML结构如下:

<div id="page">
  <div id="header"> <a href="#menu"></a> Mmune </div>
  <div id="content">
    <h4>This a mmenu</h4>
    <p>how to use the jQuery.mmenu-plugin.</p>
  </div>
  <nav id="menu">
    <ul>
    <li><a href="page.html">The page</a></li>
    <li><a href="mainmenu.html">The mainmenu</a></li>
    <li><a href="submenus.html">Submenus</a></li>
    <li><a href="labels.html">Labels</a></li>
    <li><a href="counters.html">Counters</a></li>
    <li><a href="selected.html">Selected item</a></li>
    <li><a href="openmenu.html">Open the menu</a></li>
    <li><a href="closemenu.html">Close the menu</a></li>
    </ul>
  </nav>
</div>                
              
调用插件

在页面加载完毕之后,使用下面的方法来调用插件:

$(document).ready(function() {
  $("#page").mmenu({
     // options
  }, {
     // configuration
  });
});          
              

参数(options)

参数名称 默认值 类型 描述
extensions [] Array 一组使菜单可用的扩展名称,当使用配置(extensions)时需要使用该参数
onClick{blockUI} null Boolean Whether or not to block the user interface while loading the new page
onClick{close} null Boolean 是否在用户点击一个菜单链接后是否关闭菜单
onClick{preventDefault} null Boolean 是否在点击链接时阻止默认的行为
onClick{setSelected} true Boolean 是否将被点击的菜单项显示为已点击状态
slidingSubmenus true Boolean 子菜单是否从右边滑出。如果设置为false,子菜单会显示在父菜单的下面。

配置(configuration)

配置 默认值 类型 描述
classNames{divider} "Divider" String 在一个<li>元素上使用这个class名称,该元素会被显示为一个分割条
classNames{panel} "Panel" String 使用该class名称的元素会被显示为一个Panel
classNames{selected} "Selected" String 在一个<li>元素上使用这个class名称,该元素会显示为已选择状态
classNames{vertical} "Vertical" String 在子菜单上使用这个class名称,它将会显示在父菜单的下面而不是从右边滑出
clone false Boolean 是否复制菜单
openingInterval 25 Number 打开和关闭菜单和面板的时间,单位毫秒
panelNodetype "div, ul, ol" String 容器的节点类型jQuery选择器
transitionDuration 400 Number CSS过渡效果的持续时间,单位毫秒

方法

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      });

      var api = $("#my-menu").data( "mmenu" );
      api.bind( "openPanel", function( $panel ) {
         console.log( "This panel is now opened:" + $panel.attr( "id" ) );
      });
      api.openPanel( $("#my-panel") );
   });
</script>                
              
方法名称 描述
closeAllPanels 关闭所有的面板,回到第一个面板
closePanel 关闭一个面板,只有在slidingSubmenus参数设置为false时可用
getInstance 获取菜单对象的实例
init 使用该方法初始化一个新的菜单面板
openPanel 打开一个面板
setSelected set or unset a list item as "selected".
update 更新菜单

关于该滑动侧边栏布局插件的更详细的信息请参考:http://mmenu.frebsite.nl/

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:203.23KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1926.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery高仿真移动手机滑动侧边栏布局插件

我当前G币余额:0 已下载次数:3

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有4 评论)