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

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)

配置(configuration)

方法

<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>                
              

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