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的运行机制和设计理念分析
Apr 05 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
学习使用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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
浅谈django orm 优化
2018/08/18 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
致裁判员加油稿
2014/02/08 职场文书
仓库主管岗位职责
2014/03/02 职场文书
护校行动方案
2014/05/31 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
英语感谢信范文
2015/01/20 职场文书
网络营销实训总结
2015/08/03 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫