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

抽屉式导航的实现方式-图片1

一、通过 Materialize 插件实现

1、引入文件

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

2、HTML代码

  1. <ul id="slide-out" class="side-nav">
  2.     <li>
  3.         <div class="userView">
  4.             <div class="background">
  5.                 <img src="images/office.jpg">
  6.             </div>
  7.             <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
  8.             <a href="#!name"><span class="white-text name">张三</span></a>
  9.             <a href="#!email"><span class="white-text email">jdandturk@sina.com</span></a>
  10.         </div>
  11.     </li>
  12.     <li><a href="#!"><i class="material-icons">cloud</i>带图标的第一链接</a></li>
  13.     <li><a href="#!">第二链接</a></li>
  14.     <li>
  15.         <div class="divider">
  16.     </div>
  17.     </li>
  18.     <li><a class="subheader">子标题</a></li>
  19.     <li><a class="waves-effect" href="#!">带波纹效果的第三链接</a></li>
  20. </ul>
  21. <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

3、jQuery 代码

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

4、参数说明

属性类型默认值说明
edgeString'left'Sidenav出现在屏幕位置
draggableBooleantrue允许滑动屏幕打开/关闭Sidenav
inDurationNumber250输入转换的长度（毫秒）
outDurationNumber200退出转换的长度（毫秒）
onOpenStartFunctionnull当sidenav开始进入时调用的函数
onOpenEndFunctionnull当sidenav完成输入时调用的函数
onCloseStartFunctionnull当sidenav开始退出时调用的函数
onCloseEndFunctionnull当sidenav完成退出时调用的函数
preventScrollingBooleantrue在sidenav打开时阻止页面滚动

5、效果预览

抽屉式导航的实现方式-图片2

6、示例代码下载

百度网盘

提取码: g42c

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

1、引入文件

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

2、HTML代码

  1. <div class="sidebar" id="sucaihuo"> 
  2.     <div class="sidebar-wrapper" id="sidebar-wrapper"> 
  3.         <ul class="nav"> 
  4.             <li><a href="http://www.sucaihuo.com/">sucaihuo</a></li> 
  5.             <li><a href="http://www.sucaihuo.com/js">js</a></li> 
  6.             <li><a href="http://www.sucaihuo.com/js">素材</a></li> 
  7.             <li><a href="http://www.sucaihuo.com/template">模板</a></li> 
  8.             <li><a href="http://www.sucaihuo.com/js">联系</a></li> 
  9.         </ul> 
  10.     </div> 
  11. </div>

3、jQuery 代码

  1. $(function() { 
  2.     $('#sucaihuo').simplerSidebar({ 
  3.         opener: '#toggle-sidebar', 
  4.         sidebar: { 
  5.             align: 'left', 
  6.             width: 250 
  7.         } 
  8.     }); 
  9. });

4、CSS

  1. .sidebar-wrapper {
  2.     position: relative;
  3.     height: 100%;
  4.     overflow: auto;
  5. }

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、效果预览

抽屉式导航的实现方式-图片3

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

1、修改 function.php 文件

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

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

2、修改 menu.php

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

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

替换为：

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

3、添加 js 内容

  1. <script type="text/javascript">
  2. $(function(){
  3.     $("#site-nav-wrap").click(function(){
  4.         if ($(this).find("#navigation-toggle").hasClass("nav-bar-animate")) {
  5.             $(this).find("#navigation-toggle").removeClass("nav-bar-animate");
  6.             $("#site-nav div").removeClass("open-menu-wrap");
  7.             $("body").removeClass("m-nav-show");
  8.  
  9.             $(".menu-wrap-backdrop").animate({
  10.                 opacity: 0
  11.             }, 430, function(){
  12.                 $(this).remove();
  13.             });
  14.         } else {
  15.             $(this).find("#navigation-toggle").addClass("nav-bar-animate");
  16.             $("#site-nav div").addClass("open-menu-wrap");
  17.             $("body").addClass("m-nav-show");
  18.             $(this).append("<div class='menu-wrap-backdrop fixed-fluid'></div>");
  19.         }
  20.     });
  21. });
  22. </script>

4、添加 css 样式

  1. @media screen and (max-width:900px){
  2.     #site-nav-wrap{position:absolute;top:0;left:0;height:100%;text-align:center}
  3.     #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}
  4.     .nav-bar-animate span{opacity:1;transform:rotate(45deg)}
  5.     .nav-bar-animate span:nth-last-child(3){opacity:1;transform:rotate(-45deg)}
  6.     .nav-bar-animate span:nth-last-child(2){opacity:0}
  7.     #site-nav .down-menu li{float:none;height:40px;font-size:1pc;line-height:40px}
  8.     #site-nav .nav-menu{display:block}
  9.     #menu-box,.nav-search{text-align:center}
  10.     .nav-search{position:absolute;top:0;right:0;width:40px;height:100%}
  11.     #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)}
  12.     .open-menu-wrap{transform:translate(0, 0)!important}
  13.     #navigation-toggle{margin:0 0 0 10px;width:40px}
  14.     .nav-bar-animate{position:absolute;z-index:1000;text-align:center}
  15.     .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}
  16.     .fixed-fluid{z-index:100;height:-webkit-fill-available}
  17.     .fixed-fluid,.m-nav-show{position:fixed;top:0;right:0;bottom:0;left:0}
  18.     .m-nav-show{width:100%;height:100%}
  19. }

5、效果预览

抽屉式导航的实现方式-图片4

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

本文已通过「原本」原创作品认证，转载请注明文章出处及链接。

WEB最后更新：2019-9-11
夏日阳光
  • 本文由 夏日阳光 发表于 2019年5月30日
  • 本文为夏日阳光原创文章，转载请务必保留本文链接：https://www.pieruo.com/70.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证
加载中...