jquery实现具有收缩功能的垂直导航菜单


Posted in Javascript onFebruary 16, 2016

本文介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>垂直导航菜单</title>
<style type="text/css">
body{
 margin:0;
 padding:0 0 12px 0;
 font-size:12px;
 line-height:22px;
 font-family:"\5b8b\4f53", "Arial Narrow";
 background:#fff;
}
form, ul, li, p, h1, h2, h3, h4, h5, h6{
 margin:0;
 padding:0;
}
input, select{
 font-size:12px;
 line-height:16px;
}
img{border:0;}
ul, li{list-style-type:none;}
a{
 color:#00007F;
 text-decoration:none;
}
a:hover{
 color:#bd0a01;
 text-decoration:underline;
}
.box{
 width:150px;
 margin:0 auto;
}
.menu{
 overflow:hidden;
 border-color:#C4D5DF;
 border-style:solid;
 border-width:0 1px 1px;
}
.menu li.level1 a{
 display:block;
 height:28px;
 line-height:28px;
 background:#EBF3F8;
 font-weight:700;
 color:#5893B7;
 text-indent:14px;
 border-top:1px solid #C4D5DF;
}
.menu li.level1 a:hover{
 text-decoration:none;
}
.menu li.level1 a.current{
 background:#B1D7EF;
}
 
.menu li ul{
 overflow:hidden;
}
.menu li ul.level2{
 display:none;
}
.menu li ul.level2 li a{
 display:block;
 height:28px;
 line-height:28px;
 background:#ffffff;
 font-weight:400;
 color:#42556B;
 text-indent:18px;
 border-top:0px solid #ffffff;
 overflow:hidden;
}
.menu li ul.level2 li a:hover {
    color:#f60;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".level1 > a").click(function(){
  $(this).addClass("current") 
  .next().show() 
  .parent().siblings().children("a").removeClass("current")
  .next().hide(); 
  return false;
 }); 
});
</script>
</head>
<body>
<div class="box">
 <ul class="menu">
  <li class="level1"> 
   <a href="#none">前端专区</a>
   <ul class="level2">
    <li><a href="#none">html教程</a></li>
    <li><a href="#none" >css教程</a></li>
    <li><a href="#none" >div教程</a></li>
    <li><a href="#none" >jquery教程</a></li>
   </ul>
  </li>
  <li class="level1"> 
   <a href="#none">资源专区</a>
   <ul class="level2">
    <li><a href="#none">特效下载</a></li>
    <li><a href="#none">电脑特效</a></li>
    <li><a href="#none">手机特效</a></li>
    <li><a href="#none">图片下载</a></li>
   </ul>
  </li>
  <li class="level1"> 
  <a href="#none">蚂蚁部落</a>
   <ul class="level2">
    <li><a href="#none">前端专区</a></li>
    <li><a href="#none">特效专区</a></li>
    <li><a href="#none">站长交流</a></li>
    <li><a href="#none">管理专区</a></li>
   </ul>
  </li>
 </ul>
</div>
</body>
</html>

上面的代码实现了垂直导航菜单效果,下面介绍一下它的实现过程。
一.实现过程分解:
1.<div class="box"></div>最外层的box元素能够将整个导航栏实现了水平居中效果,css代码如下:

.box{
 width:150px;
 margin:0 auto;
}

2.折叠菜单的结构布局:

<li class="level1"> 
 <a href="#none">前端专区</a>
 <ul class="level2">
  <li><a href="#none">html教程</a></li>
  <li><a href="#none" >css教程</a></li>
  <li><a href="#none" >div教程</a></li>
  <li><a href="#none" >jquery教程</a></li>
 </ul>
</li>

上面的代码是折叠菜单的结构,作为主导航的链接a被使用display:block设置为块级元素,这样就可以设置它的尺寸,同时在默认状态下,作为二级菜单的ul元素是隐藏的,也就是说二级菜单是折叠的。
二.jquery代码注释:
1.$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.$(".level1 > a").click(function(){}),为class属性值为level1元素下的一级a元素注册click事件处理函数,也就是为主导航链接注册事件处理函数。
3.$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide(),这段代码是一个链式调用效果,实现了点击主导航链接实现当前点击主导航后面的二级菜单展开,其他菜单折叠效果。
4.return false,取消主导航链接的跳转效果。

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
VUE中使用MUI方法
Feb 12 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
学习使用AngularJS文件上传控件
Feb 16 #Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 #Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 #Javascript
仅30行代码实现Javascript中的MVC
Feb 15 #Javascript
理解javascript中的with关键字
Feb 15 #Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 #Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 #Javascript
You might like
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
连接Python程序与MySQL的教程
2015/04/29 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
回门宴答谢词
2014/01/13 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书