jQuery+CSS实现一个侧滑导航菜单代码


Posted in Javascript onMay 09, 2016

侧滑菜单在网站设计中应用比较广泛,在许多网站上都可以看到此种类型的菜单。它可以展示重点信息,使其更有可读性和美观性,满足用户体验价值!

今天小编给大家展示如何使用jquery和css实现侧滑菜单。

jQuery+CSS实现一个侧滑导航菜单代码

效果展示      源码下载

为了建立导航菜单,让我们先看看html结构:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation Menu Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Content goes here -->
</body>
</html>

首先,我们引用normalize.css作为默认样式,以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。

面板按钮

每个网站面板导航按钮都类似。它往往是一个图标字体,如fontawesome,但在本教程中我想添加一些动画,所以我们用横线来实现。基本上,我们的按钮是一个跨度,包含三个div显示为水平横线。

<span class="toggle-button">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</span>

样式看起来如下:

.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}

按钮有一个固定的位置,不动时滚动页面。它也有一个 z-index :15的样式,以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式,我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时,我们添加一个类.button-open。我们引用jQuery,可以比较方便的实现它:

$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});

初学者可能不熟悉jQuery,让我解释一下这是怎么回事。首先,我们初始化一个变量称为$togglebutton,其中包含我们的按钮。我们将它存储为一个变量,然后我们创建一个事件监视器监听点击按钮。每单击一次,事件监听器会执行方法 function toggleclass()来切换.button-open。

.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转45度,与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。

侧滑菜单

侧滑菜单的html的结构如下:

<div class="menu-wrap">
<div class="menu-sidebar">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
<ul class="sub-menu">
<li><a href="#">Alignment</a></li>
<li><a href="#">Markup</a></li>
<li><a href="#">Comments</a></li>
</ul>
</li>
<li><a href="#">Courses</a></li>
<li><a href="#">Get In Touch</a></li>
</ul> 
</div>
</div>

在这里不详细解释每个风格的菜单,我们看下.menu-wrap 的div。它的样式如下:

.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}

它的位置是固定的,所以菜单一直在同一个地方滚动。高度设为100%。注意,左边距设置为负数,使这菜单从视图中消失。为了让它有一个出现的特效,我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下:

$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});

我们增加一个变量$menuwrap其中包含菜单的所有项,并使用相同的事件来创建按钮。这个.menu-show的左边距为0,并增加了一些盒子阴影效果。

.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}

子菜单和链接

你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时,链接后,有一个class .sidebar-menu-arrow。

<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
<ul class="sub-menu">
<!-- List items -->
</ul>
</li>

span 有一个::after伪元素包实现fontawesome箭头。默认情况下,子菜单是隐藏的,只有单击父级菜单时才出现:

$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});

当我们单击箭头,一个函数被调用时,它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失,函数有一个动画时间参数。

最后,我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下:

.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}

这个::after伪元素包含在每个环节下绝对定位的块级元素,随着0.15em高度和宽度。我们不只是应用背景颜色的线,我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度,我们可以通过指定的百分比,做了一个渐变的颜色变化。

.menu-sidebar li > a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}

这里一半的线是透明的,另一半是黄色的。通过背景大小200%的宽度,使透明部分占用的所有链接的宽度。

而透明的部分可以用其他颜色。这将创建一个线的另一个颜色填充的错觉,但实际上它只是一二色线。

Javascript 相关文章推荐
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
vue实现弹幕功能
Oct 25 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 #Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 #Javascript
AngularJS控制器继承自另一控制器
May 09 #Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 #Javascript
ajax跨域调用webservice的实现代码
May 09 #Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 #Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 #Javascript
You might like
php xml-rpc远程调用
2008/12/19 PHP
php 表单数据的获取代码
2009/03/10 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
vue实现井字棋游戏
2020/09/29 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
python itchat实现微信自动回复的示例代码
2017/08/14 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Pyqt5自适应布局实例
2019/12/13 Python
python实现发送邮件
2021/03/02 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
数学教师求职信范文
2015/03/20 职场文书
法律进社区活动总结
2015/05/07 职场文书
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang