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 function代码
May 23 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
详解Angular路由之路由守卫
May 10 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
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与javascript的两种交互方式
2006/10/09 PHP
php木马攻击防御之道
2008/03/24 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
从零学Python之hello world
2014/05/21 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
查环查孕证明
2014/01/10 职场文书
运动会100米解说词
2014/01/23 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
施工安全承诺书
2014/05/22 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL