php 收缩式导航菜单,JavaScript_jquery实现具有收缩功能的垂直导航菜单，本文介绍一种比较常见的导航 - phpStudy...

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

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

代码实例如下:

垂直导航菜单

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;

}

$(document).ready(function(){

$(".level1 > a").click(function(){

$(this).addClass("current")

.next().show()

.parent().siblings().children("a").removeClass("current")

.next().hide();

return false;

});

});

• 前端专区

  • html教程
  • css教程
  • div教程
  • jquery教程

• 资源专区

  • 特效下载
  • 电脑特效
  • 手机特效
  • 图片下载

• 蚂蚁部落

  • 前端专区
  • 特效专区
  • 站长交流
  • 管理专区

上面的代码实现了垂直导航菜单效果，下面介绍一下它的实现过程。

一.实现过程分解:

1.

.box{

width:150px;

margin:0 auto;

}

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

前端专区

• html教程
• css教程
• div教程
• jquery教程

上面的代码是折叠菜单的结构，作为主导航的链接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程序设计有所帮助。相关阅读:

oracle 索引不能使用深入解析

IOS中内存管理那些事

AngularJs页面筛选标签小功能

在WordPress中实现发送http请求的相关函数解析

全面解析Hibernate关联操作、查询操作、高级特性、并发处理机制

简单实现异步编程promise模式

bootstrap网页框架的使用方法

JS常用表单验证方法总结

windows7下启动mysql服务出现服务名无效的原因及解决方法

深入理解Java反射

Win10 Mobile正式版官方演示视频曝光 亮点很多

JS实现浏览器状态栏显示时间的方法

win8系统如何查看cpu温度 win8系统进入bios查看cpu温度的图文教程

javascript强制点击广告的方法