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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
node后端服务保活的实现
Nov 10 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使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
Javascript confirm多种使用方法解析
2020/09/25 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
浅谈Django REST Framework限速
2017/12/12 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
python输入中文的实例方法
2020/09/14 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
校园之声广播稿
2014/01/31 职场文书
商务日语专业自荐信
2014/04/17 职场文书
外联部演讲稿
2014/05/24 职场文书
公务员个人考察材料
2014/12/23 职场文书
校长一岗双责责任书
2015/05/09 职场文书
天鹅湖观后感
2015/06/09 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
Python中使用ipython的详细教程
2021/06/22 Python