为了建立导航菜单，让我们先看看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. spring +springmvc+mybatis组合mybatis-config.xml文件配置

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...

  2. Java基础语法<二> 字符串String

    1. 代码点与代码单元 Java字符串由char序列组成.大多数的常用Unicode字符使用一个代码单元就可以表示,而辅助字符需要一对代码单元表示. length()方法将返回采用UTF-16编码表示 ...

  3. JAVA中Socket的用法模拟服务端和客户端

    <看透springMvc源代码分析与实践>学习笔记 Socket分为ServerSocket和Socket两个大类 ServerSocket用于服务端,可以通过accept方法监听请求,监 ...

  4. JAVA金额按比例分摊，零头处理

    金额精确计算,必须使用BigDecimal; 平均分摊,分摊的零头,一般都是由数据"精度"和分摊系数决定的: 主要是如何对零头进行处理,保证尽可能的平均分配. 1.按户均摊 /** ...

  5. Office365开发系列——开发一个全功能的Word Add-In

    2016年10月我参加了在北京举行的DevDays Asia 2016 - Office 365应用开发”48小时黑客马拉松“,我开发的一个Word Add-In Demo——WordTemplate ...

  6. Java后端开发书架

    本人摘录于江南白衣文章,文章地址:http://calvin1978.blogcn.com/articles/javabookshelf.html 书架主要针对Java后端开发. 3.0版把一些后来买 ...

  7. github 项目管理

    一.在GitHub上创建项目 1. 打开浏览器 在地址栏输入地址:github.com 填写用户名.邮箱.密码 点击Sign up即可简单地注册 2. 完成注册,进入github平台, 点击new r ...

  8. 在ASP.NET MVC中利用Aspose.cells 将查询出的数据导出为excel，并在浏览器中下载。

    正题前的唠叨 本人是才出来工作不久的小白菜一颗,技术很一般,总是会有遇到一些很简单的问题却不知道怎么做,这些问题可能是之前解决过的.发现这个问题,想着提升一下自己的技术水平,将一些学的新的'好'东西记 ...

  9. 【翻译】React vs Angular: JavaScript的双向性

    翻译原文链接:https://blog.prototypr.io/react-vs-angular-two-sides-of-javascript-b850de22b413 我的翻译小站:http:/ ...

  10. jenkins，SVN构建总是clean目录，回归失败

    近期发现配置的jenkins任务打包时间极长,经过定位为svn版本的问题,不同的svn版本.svn的信息存在不一致. 解决: 升级服务器svn版本. 调整jenkins系统设置: 测试通过(回滚成功) ...