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%的宽度，使透明部分占用的所有链接的宽度。
而透明的部分可以用其他颜色。这将创建一个线的另一个颜色填充的错觉，但实际上它只是一二色线。
相关推荐
-
jquery实现具有收缩功能的垂直导航菜单
本文介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>垂直导航菜单</title> <style type="text/css"> body{ margin:0; padding:0 0 12px 0
-
jquery实现网页定位导航
不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示.今天我就来讲讲这样的效果是如何实现的. 先贴上显示效果: 实现: 这个的页面布局很简单,大家下去多试试就OK了,值得注意的是需要在菜单布局里的每一个li里面添加a标签并且给a标签的 href 赋上对应的id号,可以让其点击立即跳到id对应的内容 然后就是jquery是如何实现的: 1.我们需
-
jQuery仿京东商城楼梯式导航定位菜单
实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></
-
让网页跳转到指定位置的jquery代码非书签
调用: 复制代码 代码如下: var offset = 10; var hash = globalHash; if (hash) { scrollBodyTopTo($("div#c_"+hash).offset().top-offset); } 方法: 复制代码 代码如下: function scrollBodyTopTo(pos) { $("html,body").animate({scrollTop:pos}); }
-
JQUERY实现网页右下角固定位置展开关闭特效的方法
本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: <div class="tagbox"> <div class="tag"> <span>热门标签...</span> <ul> <li><a href='/tag/js展开收起_1.html' target="_blank">js展开收起<
-
jquery实现垂直和水平菜单导航栏
本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下 1. HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖直导航菜单</title> <link href="css/Vmenu.css" rel="stylesheet" /> <script
-
jQuery插件StickUp实现网页导航置顶
实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究. 使用方法: 1.加载插件和jQuery <script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stic
-
jQuery+css实现非常漂亮的水平导航菜单效果
本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 用到的背景图片tab.gif如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
-
jQuery纵向导航菜单效果实现方法
本文实例讲述了jQuery纵向导航菜单效果实现方法.分享给大家供大家参考,具体如下: 效果如下: 核心代码如下: $( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $catList = $( ".J_Cat" ); //一级菜单li $catList.on( "mouseenter", function(){ var index = $
-
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
jQuery实现网页顶部固定导航效果代码
本文实例讲述了jQuery实现网页顶部固定导航效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
Jquery网页内滑动缓冲导航的实现代码
如果网页过长,需要页内导航的时候,我们一般是在目标出设置ID,比如<div id="footer"></div>,然后在当前页面某个链接地址设置如:<a href="#footer">点击指向到底部</a>,这样点击该链接后就会马上转到网页底部,默认是直接转到底部,有的访客会莫名其妙,怎么突然就到底部了. 在越来越关注用户体验的今天,这点我们要解决,下面就是一段简单的Jquery代码,实现滑动缓冲的方式实现页内导航,用
-
jQuery网页定位导航特效实现方法
本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加