抽屉式导航的实现方式

夏日阳光
139
文章
6
评论
2019年5月30日12:27:18 评论 465 1623字阅读5分24秒

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

抽屉式导航的实现方式

一、通过 Materialize 插件实现

1、引入文件

2、HTML代码

3、jQuery 代码

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、引入文件

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 代码是多余的,大家根据实际情况自行调整。

weinxin
关于本站
本站是一个分享建站经验、SEO优化、互联网技术以及日常生活的个人生活博客。
  • 版权声明: 发表于 2019年5月30日12:27:18
  • 转载注明:https://www.pieruo.com/8898.html
匿名

发表评论

匿名网友 填写信息

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