抽屉式导航的实现方式

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

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

属性类型默认值说明
edgeString'left'Sidenav出现在屏幕位置
draggableBooleantrue允许滑动屏幕打开/关闭Sidenav
inDurationNumber250输入转换的长度(毫秒)
outDurationNumber200退出转换的长度(毫秒)
onOpenStartFunctionnull当sidenav开始进入时调用的函数
onOpenEndFunctionnull当sidenav完成输入时调用的函数
onCloseStartFunctionnull当sidenav开始退出时调用的函数
onCloseEndFunctionnull当sidenav完成退出时调用的函数
preventScrollingBooleantrue在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: