如何用CSS和jQuery实现一个侧滑导航菜单

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

如何⽤CSS和jQuery实现⼀个侧滑导航菜单
为了建⽴导航菜单，让我们先看看html结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation Menu Demo</title>
<link rel="stylesheet" href="">
<link href='' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="">
<script src=""></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>

</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;
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样式。

类其余的样式被移动到单独的样式⽂件中。

动画发⽣时，我$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});
初学者可能不熟悉jQuery，让我解释⼀下这是怎么回事。

⾸先，我们初始化⼀个变量称为$togglebutton，其中包含我们的按钮。

我们将它存储为⼀个变量，然后我们创建⼀个事件监视器监听点击按钮。

每单击⼀次，事件监听器会执⾏⽅法 function to .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 {
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">

</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%的宽度，使透明部分占⽤的所有链接的宽度。