为了建立导航菜单，让我们先看看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. ASP.NET Core MVC 控制器创建与依赖注入

    本文翻译自<Controller activation and dependency injection in ASP.NET Core MVC>,由于水平有限,故无法保证翻译完全准确,欢 ...

  2. 拥抱.NET Core系列：Logging (1)

    在之前我们简单介绍了 .NET Core 中的 DI组件,没来及了解的童鞋可以翻翻我之前的文章. 接下来会对 .NET Core 中的 Logging 进行介绍. 本文中使用了"Micros ...

  3. js获取客户端MAC地址

    最近遇到一个需求,医院要求呼叫中心账号必须对应MAC地址,也就是说该MAC地址必须和呼叫中心账号对应才可使用,这可就难道我了,这需求就要求每次都判断用户登录的电脑MAC地址是否有呼叫中心账号,当然只针 ...

  4. Android使用ViewPager实现导航菜单

    首先设置页面的Fragment布局: public class TabFragment extends ListFragment { @Override public void onViewCreat ...

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

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

  6. TCP常见的定时器三次握手与四次挥手

    1.TCP常见的定时器 在TCP协议中有的时候需要定期或者按照某个算法对某个事件进行触发,那么这个时候,TCP协议是使用定时器进行实现的.在TCP中,会有七种定时器: 建立连接定时器(connecti ...

  7. Angular4 - Can't bind to 'ngModel' since it isn't a known property of 'input'.

    用[(ngModel)]="xxx"双向绑定,如:控制台报错:Can't bind to 'ngModel' since it isn't a known property of ...

  8. docker~linux下的部署和基本命令

    回到目录 docker是最近比较流行的容器工具,它可以帮助我们快速部署应用,尤其是在“微服务”环境下,成百个服务要去启动,停止,部署一次太麻烦,而如果把它部署到docker里,下一次应用就方便多了,如 ...

  9. 华为OJ之尼科彻斯定理

    题目详情: 验证尼科彻斯定理,即:任何一个整数m的立方都可以写成m个连续奇数之和. 例如: 1^3=1 2^3=3+5 3^3=7+9+11 4^3=13+15+17+19 输入:一个整形数字 输出: ...

  10. [Open Source] .NET 基于StackExchange.Redis的扩展

    目录 简介 主从复制 备份与恢复 API AddOrUpdate GetOrAdd DeleteByPattern SearchKeys TransExcute Subscribe/Publish T ...