为了建立导航菜单，让我们先看看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. voa 2015 / 4 / 14

    Even with falling oil prices and strong U.S. growth, the head of the International Monetary Fund sai ...

  2. 某天U盘插在笔记本打不开了,是U盘坏了还是电脑的问题?

    五六月份忙着毕业设计与毕业论文,U盘在这个时候就是大功臣啦! 然而打印完最终版本论文上交后,再次把U盘插在自己的笔记本上读取失败了... 只有一个空白的图标,打不开,也无法格式化. 试着删除,拔了又插 ...

  3. If I were you

    别让孩子输在起跑线上,这句话有道理吗? 答:和别人比较是人生悲剧的源头. 做哪些事情可以提高生活的品质? 答:定期扔东西. 结婚以后,两个人在一起最重要的是什么? 答:就当这婚还没结呢. 去做你害怕的 ...

  4. [Oracle]约束（constraint）

    (一)约束的概念 在Oracle中,可以通过设置约束来防止无效数据进入表中.Oracle一共有5种约束: 主键约束(primary key) 外键约束(foreign key) 唯一性约束(uniqu ...

  5. sqlserver提高篇续集

    七．数据完整性 1.概念:数据一致性和准确性. 分类:域完整性.实体完整性.引用完整性. 解析:域完整性也叫列完整性是指一个数据集对某个列是否有效和确定是否允许为空值.实体完整性也叫行完整性 要求所有 ...

  6. 学习笔记TF030:实现AlexNet

    ILSVRC(ImageNet Large Scale Visual Recognition Challenge)分类比赛.AlexNet 2012年冠军(top-5错误率16.4%,额外数据15.3 ...

  7. SetConsoleTextAttribute 函数--设置控制台文本属性

    SetConsoleTextAttribute函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686047(v=vs. ...

  8. .babelrc 文件

    文件干啥用的 babel是降es6转义成浏览器能理解的es5语法. 如果项目中用了babel 转移,需要定义babel需要的插件和预设转码. babel 一般可以配合 webpack . browse ...

  9. yii2 队列 shmilyzxt/yii2-queue 简介

    在yii2论坛中看到一个关于队列的帖子,感觉不错.http://www.yiichina.com/extension/1084 (注:SendMail 错写为 SendMial,粘贴时要注意了.) 在 ...

  10. Redux源码分析之createStore

    接着前面的,我们继续,打开createStore.js, 直接看最后, createStore返回的就是一个带着5个方法的对象. return { dispatch, subscribe, getSt ...