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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
原生JS进行前后端同构
Apr 22 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
vue中进行微博分享的实例讲解
Oct 14 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分页函数
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
详解【python】str与json类型转换
2019/04/29 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
pywinauto自动化操作记事本
2019/08/26 Python
python cookie反爬处理的实现
2020/11/01 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
旅游专业毕业生自荐书
2014/06/30 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
师德师风培训感言
2015/08/03 职场文书