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&nbsp;</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">计算机科学&nbsp;</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">其他技术&nbsp;</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制作移动端隐藏式菜单教程
sidr-class-toggle-sidr-close 元素是:
sidr制作移动端隐藏式菜单教程

更多

涉及到的参数

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
}
上一篇:纯CSS中如何实现单击按钮开关


下一篇:网页|利用提示框(Tooltip)实现弹窗效果