抽屉式导航的实现方式

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

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

一、通过 Materialize 插件实现

1、引入文件

2、HTML代码

3、jQuery 代码

4、参数说明

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

5、效果预览

6、示例代码下载

提取码: g42c

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

1、引入文件

2、HTML代码

3、jQuery 代码

4、CSS

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 文件来渲染的。

2、修改 menu.php

位置在:wp-content/themes/begin/template/menu.php,将:

替换为:

3、添加 js 内容

4、添加 css 样式

5、效果预览

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

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

发表评论

匿名网友

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