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;
});
});
上面的代码实现了垂直导航菜单效果,下面介绍一下它的实现过程。
一.实现过程分解:
1.
.box{
width:150px;
margin:0 auto;
}
2.折叠菜单的结构布局:
上面的代码是折叠菜单的结构,作为主导航的链接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强制点击广告的方法