抽屉式导航的实现方式

抽屉式侧滑导航是我们常见的一种导航设计，在网页中，尤其是在移动终端设备上，那么，如何通过代码制作出一款非常漂亮的抽屉式侧滑导航菜单呢？本文将介绍三种实现抽屉式导航的方法： 分别是使用 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、参数说明

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、参数说明

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

5、效果预览

自定义实现是以 begin 主题为例的，但代码通用，部分 css 代码是多余的，大家根据实际情况自行调整。