为了建立导航菜单，让我们先看看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;

 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 {

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

如何用CSS和jQuery实现一个侧滑导航菜单的更多相关文章

  1. JQUERY 插件开发——MENU（导航菜单）

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  2. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  3. 使用CSS创建有图标的网站导航菜单

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...

  4. jquery 实现两级导航菜单

    主要用于运维系统, 对界面要求不高的场合.  深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1.  HTML 页面及 JS 交互, 注意引入 Jquery ...

  5. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  6. jquery倾斜的动画导航菜单

    1. [代码]完整源代码  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  7. Jquery列表中的导航菜单的应用

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. 如何用 CSS 和 D3 创作一个无尽的六边形空间

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/NBvrWL 可交互视频 此视频是可 ...

  9. 前端每日实战：134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...

随机推荐

  1. Java自学手记——泛型

    泛型在集合中的应用 泛型在集合经常能看到,有两个好处:1.把运行时出现 的问题提前至了编译时:2.避免了无谓的强制类型转换. 用法:两边泛型的类型必须相同,可允许一边不写,只是为了兼容性,并不推荐. ...

  2. Linux下搭建FTP服务器（Ubuntu16.04）

    搞了下FTP服务器,基本上能遇到的问题都遇到了-.-! 先说步骤: 1.安装vsftpd软件包 sudo apt-get install vsftpd 2.打开配置文件 vim /etc/vsftpd ...

  3. Extjs4+PHP MVC模式一（入门）

    Extjs是一个js框架,可以实现大部分web页面的东西,个人理解是一款集html.css.js一体的框架,功能挺强大的.结合PHP和sql可以实现整个系统.现在来说说怎么用它.(我的项目是用的TP框 ...

  4. 基于微信小程序的系统开发准备工作

    腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传统的APP来说,微信小程序确实能够 ...

  5. man rsync翻译(rsync命令中文手册)

    本文为命令rsync的man文档翻译,几乎所有的选项都翻译了,另外关于筛选规则部分只翻译了一部分.由于原文很多地方都比较啰嗦,所以译文中有些内容可能容易让国人疑惑,所以我个人在某些地方加上了注释.若有 ...

  6. Hbase单机安装部署

    Hbase单机安装部署 http://blogxinxiucan.sh1.newtouch.com/2017/07/27/Hbase单机安装部署/ 下载Hbase Hbase官网下载地址 http:/ ...

  7. Android学习笔记-EditText(输入框)(二)

    6.控制EditText四周的间隔距离与内部文字与边框间的距离 我们使用margin相关属性增加组件相对其他控件的距离,比如android:marginTop = "5dp" 使用 ...

  8. Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

    前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...

  9. 一步一步学习Vue（十一）

    本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var ...

  10. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...