侧滑菜单在网站设计中应用比较广泛，在许多网站上都可以看到此种类型的菜单。它可以展示重点信息，使其更有可读性和美观性，满足用户体验价值！
今天小编给大家展示如何使用jquery和css实现侧滑菜单。
为了建立导航菜单，让我们先看看html结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animation Menu Demo</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Montserrat' type='text/css'> <link 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="https://www.jb51.net/script.js"></script> <link href="https://www.jb51.net/style.css"> </head> <body> <!-- Content goes here --> </body> </html>
首先，我们引用normalize.css作为默认样式，以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。
面板按钮
每个网站面板导航按钮都类似。它往往是一个图标字体，如fontawesome，但在本教程中我想添加一些动画，所以我们用横线来实现。基本上，我们的按钮是一个跨度，包含三个div显示为水平横线。
<span> <div></div> <div></div> <div></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> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Click The Arrow</a> <span></span> <ul> <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。它的样式如下：