抽屉式导航的实现方式

抽屉式侧滑导航是我们常见的一种导航设计，在网页中，尤其是在移动终端设备上，那么，如何通过代码制作出一款非常漂亮的抽屉式侧滑导航菜单呢？本文将介绍三种实现抽屉式导航的方法：分别是使用 Materialize 和 Simpler Sidebar 这两款 jQuery 插件以及自定义实现抽屉式侧滑导航。

一、通过 Materialize 插件实现

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/materialize.js"></script>

2、HTML代码

<ul id="slide-out" class="side-nav">
    <li>
        <div class="userView">
            <div class="background">
                <img src="images/office.jpg">
            </div>
            <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
            <a href="#!name"><span class="white-text name">张三</span></a>
            <a href="#!email"><span class="white-text email">jdandturk@sina.com</span></a>
        </div>
    </li>
    <li><a href="#!"><i class="material-icons">cloud</i>带图标的第一链接</a></li>
    <li><a href="#!">第二链接</a></li>
    <li>
        <div class="divider">
    </div>
    </li>
    <li><a class="subheader">子标题</a></li>
    <li><a class="waves-effect" href="#!">带波纹效果的第三链接</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

3、jQuery 代码

$(function() { 
    $('.button-collapse').sideNav({
        menuWidth: 300, // Default is 240
        edge: 'right', // Choose the horizontal origin
        closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
        draggable: true // Choose whether you can drag to open on touch screens
    });
});

4、参数说明

属性	类型	默认值	说明
edge	String	‘left’	Sidenav出现在屏幕位置
draggable	Boolean	true	允许滑动屏幕打开/关闭Sidenav
inDuration	Number	250	输入转换的长度（毫秒）
outDuration	Number	200	退出转换的长度（毫秒）
onOpenStart	Function	null	当sidenav开始进入时调用的函数
onOpenEnd	Function	null	当sidenav完成输入时调用的函数
onCloseStart	Function	null	当sidenav开始退出时调用的函数
onCloseEnd	Function	null	当sidenav完成退出时调用的函数
preventScrolling	Boolean	true	在sidenav打开时阻止页面滚动

5、效果预览

6、示例代码下载

百度网盘

提取码: g42c

二、通过 Simpler Sidebar 插件实现抽屉式侧滑导航

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/simpler-sidebar.min.js"></script>

2、HTML代码

<div class="sidebar" id="sucaihuo"> 
    <div class="sidebar-wrapper" id="sidebar-wrapper"> 
        <ul class="nav"> 
            <li><a href="http://www.sucaihuo.com/">sucaihuo</a></li> 
            <li><a href="http://www.sucaihuo.com/js">js</a></li> 
            <li><a href="http://www.sucaihuo.com/js">素材</a></li> 
            <li><a href="http://www.sucaihuo.com/template">模板</a></li> 
            <li><a href="http://www.sucaihuo.com/js">联系</a></li> 
        </ul> 
    </div> 
</div>

3、jQuery 代码

$(function() { 
    $('#sucaihuo').simplerSidebar({ 
        opener: '#toggle-sidebar', 
        sidebar: { 
            align: 'left', 
            width: 250 
        } 
    }); 
});

4、CSS

.sidebar-wrapper {
    position: relative;
    height: 100%;
    overflow: auto;
}

5、参数说明

属性	类型	默认值	说明
opener	字符串	en	按钮或图标的选择器，用来触发侧边栏
attr	字符串	simplersidebar	为侧边栏添加 data 属性，即默认添加 data-simplersidebar=”disabled” data-simplersidebar=”active”
top	整数	0	设置侧边栏 top 值
animation	对象		动画持续时间及动画方式，默认为： { duration: 500, easing: ‘swing’ }
sidebar	对象		设置侧边栏的属性，如位置、宽度等，默认为： { width: 350, gap: 64, closingLinks: ‘a’, css: { zIndex: 3000 } }
mask	对象		实现显示遮罩及设置遮罩属性：默认为： { display: true, css: { backgroundColor: ‘black’, opacity: 0.5, filter: ‘Alpha(opacity=50)’ } }

6、效果预览

三、自定义抽屉式侧滑导栏

1、修改 function.php 文件

将加载 superfish.js 的代码注释，因为默认的手机菜单动画是通过这个 js 文件来渲染的。

wp_register_script( 'superfish', get_template_directory_uri() . "/js/superfish.js", array(), version, true );

2、修改 menu.php

位置在：wp-content/themes/begin/template/menu.php，将：

<a href="#sidr-main" id="navigation-toggle" class="bars"><i class="be be-menu"></i></a>

替换为：

<a href="#sidr-main" id="navigation-toggle" class="bars"><span></span><span></span><span></span></a>

3、添加 js 内容

<script type="text/javascript">
$(function(){
    $("#site-nav-wrap").click(function(){
        if ($(this).find("#navigation-toggle").hasClass("nav-bar-animate")) {
            $(this).find("#navigation-toggle").removeClass("nav-bar-animate");
            $("#site-nav div").removeClass("open-menu-wrap");
            $("body").removeClass("m-nav-show");

            $(".menu-wrap-backdrop").animate({
                opacity: 0
            }, 430, function(){
                $(this).remove();
            });
        } else {
            $(this).find("#navigation-toggle").addClass("nav-bar-animate");
            $("#site-nav div").addClass("open-menu-wrap");
            $("body").addClass("m-nav-show");
            $(this).append("<div class='menu-wrap-backdrop fixed-fluid'></div>");
        }
    });
});
</script>

4、添加 css 样式

@media screen and (max-width:900px){
    #site-nav-wrap{position:absolute;top:0;left:0;height:100%;text-align:center}
    #navigation-toggle span{position:relative;z-index:1;display:block;margin-right:auto;margin-bottom:6px;margin-left:auto;width:20px;height:1px;border-radius:2px;background:#000;transition:transform .5s cubic-bezier(0.77,0.2,0.05,1),background .5s cubic-bezier(0.77,0.2,0.05,1),opacity .55s ease;transition:transform .5s cubic-bezier(0.77,0.2,0.05,1),background .5s cubic-bezier(0.77,0.2,0.05,1),opacity .55s ease,-webkit-transform .5s cubic-bezier(0.77,0.2,0.05,1);transform-origin:20px}
    .nav-bar-animate span{opacity:1;transform:rotate(45deg)}
    .nav-bar-animate span:nth-last-child(3){opacity:1;transform:rotate(-45deg)}
    .nav-bar-animate span:nth-last-child(2){opacity:0}
    #site-nav .down-menu li{float:none;height:40px;font-size:1pc;line-height:40px}
    #site-nav .nav-menu{display:block}
    #menu-box,.nav-search{text-align:center}
    .nav-search{position:absolute;top:0;right:0;width:40px;height:100%}
    #site-nav div{position:fixed;top:0;bottom:0;left:0;z-index:101;overflow:scroll;overflow-x:hidden;padding-top:52px;width:260px;height:-webkit-fill-available;background:#fff;transition:transform .43s cubic-bezier(0.3,0,0,1);transform:translate(-300px, 0)}
    .open-menu-wrap{transform:translate(0, 0)!important}
    #navigation-toggle{margin:0 0 0 10px;width:40px}
    .nav-bar-animate{position:absolute;z-index:1000;text-align:center}
    .menu-wrap-backdrop{background:rgba(0,0,0,.55);animation-name:fadeIn;animation-duration:.43s;animation-timing-function:linear;animation-direction:normal;animation-delay:0s}
    .fixed-fluid{z-index:100;height:-webkit-fill-available}
    .fixed-fluid,.m-nav-show{position:fixed;top:0;right:0;bottom:0;left:0}
    .m-nav-show{width:100%;height:100%}
}