抽屉式导航的实现方式

2019年5月30日12:27:18 评论 1,111

抽屉式侧滑导航是我们常见的一种导航设计,在网页中,尤其是在移动终端设备上,那么,如何通过代码制作出一款非常漂亮的抽屉式侧滑导航菜单呢?本文将介绍三种实现抽屉式导航的方法: 分别是使用 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 rel="external nofollow" target="_blank" href="https://www.pieruo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5zdWNhaWh1by5jb20v">sucaihuo</a></li> 
            <li><a rel="external nofollow" target="_blank" href="https://www.pieruo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5zdWNhaWh1by5jb20vanM=">js</a></li> 
            <li><a rel="external nofollow" target="_blank" href="https://www.pieruo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5zdWNhaWh1by5jb20vanM=">素材</a></li> 
            <li><a rel="external nofollow" target="_blank" href="https://www.pieruo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5zdWNhaWh1by5jb20vdGVtcGxhdGU=">模板</a></li> 
            <li><a rel="external nofollow" target="_blank" href="https://www.pieruo.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5zdWNhaWh1by5jb20vanM=">联系</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%}
}

5、效果预览

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

本文已通过「原本」原创作品认证,未经作者授权请勿直接转载,负责将依法追究其法律责任。
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: