sidr制作移动端隐藏式菜单教程
介绍
sidr侧栏显示插件： http://www.berriart.com/sidr/
使用
1. 在网页中引入插件文件
<!-- Include jQuery -->
<script src="jquery.min.js"></script>
<!-- Include the Sidr JS -->
<script src="jquery.sidr.min.js"></script>
2. html中菜单
<div id="sidr-close">
<a href="#sidr-close" class="toggle-sidr-close">×</a>
</div>
<nav id="site-nav" class="main-nav">
<a href="#sidr-main" id="navigation-toggle" class="bars">
<i class="fa fa-bars"></i>
</a>
<div class="menu-pcmenu-container">
<ul id="menu-pcmenu" class="down-menu nav-menu sf-js-enabled sf-arrows">
<li>
<a href="/">
<i class="fa-home fa"></i>
<span class="font-text">首页</span>
</a>
</li>
<li>
<a href="/category/1">
<i class="fa fa-coffee"></i>
<span class="font-text">Java </span>
</a>
<ul class="sub-menu">
<li>
<a href="/category/2" target="_blank">Java基础</a>
</li>
<li>
<a href="/category/3" target="_blank">Core Java</a>
</li>
<li>
<a href="/category/4" target="_blank">多线程并发编程</a>
</li>
<li>
<a href="/category/5" target="_blank">Sockets和IO</a>
</li>
<li>
<a href="/category/6" target="_blank">设计模式和反射</a>
</li>
<li>
<a href="/category/7" target="_blank">JVM</a>
</li>
<li>
<a href="/category/8" target="_blank">JavaWeb</a>
</li>
<li>
<a href="/category/9" target="_blank">Java框架</a>
</li>
</ul>
</li>
<li>
<a href="/category/10">
<i class="fa fa-cubes"></i>
<span class="font-text">计算机科学 </span>
</a>
<ul class="sub-menu">
<li>
<a href="/category/11" target="_blank">数据结构和算法</a>
</li>
<li>
<a href="/category/12" target="_blank">操作系统</a>
</li>
<li>
<a href="/category/13" target="_blank">数据库</a>
</li>
<li>
<a href="/category/14" target="_blank">计算机网络</a>
</li>
</ul>
</li>
<li>
<a href="/category/15">
<i class="fa-snowflake-o fa"></i>
<span class="font-text">其他技术 </span>
</a>
<ul class="sub-menu">
<li>
<a href="/category/16" target="_blank">消息服务</a>
</li>
<li>
<a href="/category/17" target="_blank">缓存服务</a>
</li>
<li>
<a href="/category/100000003" target="_blank">微服务</a>
</li>
<li>
<a href="/category/100000004" target="_blank">搜索引擎</a>
</li>
<li>
<a href="/category/100000005" target="_blank">权限框架</a>
</li>
<li>
<a href="/category/100000006" target="_blank">开发利器</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
3. 通过插件的sidr()方法调用插件
$('#navigation-toggle').sidr({
name: 'sidr-main',
source: '#sidr-close, #site-nav',
side: 'left',
displace: false
});
$(".sidr-class-toggle-sidr-close").click( function() {
$.sidr('close', 'sidr-main');
return false;
});
navigation-toggle 元素是：
sidr-class-toggle-sidr-close 元素是：
更多
涉及到的参数
displace (Boolean) Default: true [ Version 1.2.0 an above ]
Displace the body content or not.
这个需要是假，不然菜单就会占用空间，会把其他元素挤出去，
而不是浮在页面上
source (String|Function) Default: null
A jQuery selector, an url or a callback function.
就是要显示的菜单元素
格式
jQuery.sidr( [method] [, name] [, complete] )
method (String) Default: 'toggle'
Choose between 'toggle', 'open', 'close' or 'status'. [ Status is only available in version 2.1.0 an above ]
name (String) Default: 'sidr'
Name of the target sidr.
complete (Function) Default: none
A function to call once the animation is complete.
return null || Object [ Version 2.2.0 an above ]
It returns null when methods 'toggle', 'open' or 'close' are called, or an object when status is called:
{
moving: (boolean), // A boolean indicating if the menu is currently being moved
opened: (string || false) // Name of the opened menu or false if all are closed
}