jQuery制作水平多级下拉菜单
2014-08-21 10:28
316 查看
本篇体验使用jQuery制作水平的、多级的、下拉菜单。
下拉菜单的html部分如下。
写一个DropDownMenu.css样式文件。先把一级菜单样式设置好。其中的一个关键点是:需要把li的position属性设置为relative,然后再把li的子元素a的position属性设置为absolute,这样,a就可以以li为参照进行绝对定位了。
以上,box-sizing属性用来定义一块区域所包含的内容,它的属性值包括:
box-sizing: content-box|border-box|initial|inherit;
设置为border-box,意味着width和height属性只包括区域内内容、padding、border,不包括margin。
设置为content-box,意味着width和height属性只包括区域内内容,不包括border, padding, margin。
设置为inherit,意味着width和height属性包括的内容和父级元素一致。
设置为initial,意味着width和height属性包括区域内内容、padding、border、margin。
在主页面引用该样式文件。
一级菜单设置完了,接下来设置下拉菜单部分。需要把ul设置为相对定位,因为它要相对于父级li来定位。
还有一点,我们希望在显示菜单的时候,首先隐藏二级菜单。在.dropdown增加一个display属性。
最后,就到了jquery部分了。我们希望:当把鼠标移动到具有二级菜单的li时,让对应的二级ul出现,而当鼠标移出具有二级菜单的li时,让对应的二级ul消失。
总结:
1、为了确保li和子元素a区域大小一致,需要把li设置为相对定位,把a设置为绝对定位,并且两者的宽和高保持一致。
2、为了确保二级菜单ul的位置在一级li的正下方,需要把二级菜单的ul设置为相对定位。
3、jquery中$(this)是指当前上下文。
下拉菜单的html部分如下。
<body>
<nav class="main-nav">
<ul class="nav-list">
<li><a href="#">主页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a>
<ul class="dropdown">
<li><a href="#">网页设计</a></li>
<li><a href="#">图形设计</a></li>
<li><a href="#">视频制作</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</body>
写一个DropDownMenu.css样式文件。先把一级菜单样式设置好。其中的一个关键点是:需要把li的position属性设置为relative,然后再把li的子元素a的position属性设置为absolute,这样,a就可以以li为参照进行绝对定位了。
.main-nav {
background-color: #333;
border-bottom: 2px solid #aaa;
width: 100%;
height: 40px;
}
.nav-list {
list-style: none;
padding-left: 0;
width: 900px;
margin: 0 auto;
}
.nav-list > li {
margin: 0;
float: left;
width: 120px;
height: 40px;
position: relative; /*设置relative后,li的子元素可以在li中绝对定位*/
}
.nav-list > li > a {
color: #ddd;
text-decoration: none;
position: absolute;
width: 120px; /*与li的宽度一致,保证a的区域大小与li一致,方便点击*/
height: 40px; /*与li的高度一致,保证a的区域大小与li一致,方便点击*/
text-align: center;
padding-top: 12px;
box-sizing: border-box;
}
.nav-list > li > a:hover {
background-color: #555;
}
以上,box-sizing属性用来定义一块区域所包含的内容,它的属性值包括:
box-sizing: content-box|border-box|initial|inherit;
设置为border-box,意味着width和height属性只包括区域内内容、padding、border,不包括margin。
设置为content-box,意味着width和height属性只包括区域内内容,不包括border, padding, margin。
设置为inherit,意味着width和height属性包括的内容和父级元素一致。
设置为initial,意味着width和height属性包括区域内内容、padding、border、margin。
在主页面引用该样式文件。
<link href="DropDownMenu.css" rel="stylesheet" />
一级菜单设置完了,接下来设置下拉菜单部分。需要把ul设置为相对定位,因为它要相对于父级li来定位。
.dropdown {
display: none;
list-style: none;
position: relative;
top: 40px;
padding-left: 0;
width: 120px;
}
.dropdown li {
background-color: #555;
position: relative;
width: 120px;
height: 35px;
}
.dropdown li a {
color: #ddd;
text-decoration: none;
position: absolute;
width: 120px;
height: 35px;
padding: 10px 0 0 10px;
box-sizing: border-box;
}
.dropdown li a:hover {
background-color: #777;
}
还有一点,我们希望在显示菜单的时候,首先隐藏二级菜单。在.dropdown增加一个display属性。
.dropdown {
display: none;
list-style: none;
position: relative;
top: 40px;
padding-left: 0;
width: 120px;
}
最后,就到了jquery部分了。我们希望:当把鼠标移动到具有二级菜单的li时,让对应的二级ul出现,而当鼠标移出具有二级菜单的li时,让对应的二级ul消失。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('li').has('.dropdown').hover(
function() {
$(this).find('.dropdown').slideDown();
},
function() {
$(this).find('.dropdown').slideUp();
}
);
});
</script>
总结:
1、为了确保li和子元素a区域大小一致,需要把li设置为相对定位,把a设置为绝对定位,并且两者的宽和高保持一致。
2、为了确保二级菜单ul的位置在一级li的正下方,需要把二级菜单的ul设置为相对定位。
3、jquery中$(this)是指当前上下文。
相关文章推荐
- 多级水平下拉菜单(css)
- jQuery cxSelect 多级联动下拉菜单
- jQuery实现多级手风琴树形下拉菜单(源码)
- js+css+div制作水平下拉菜单_是宇斯..不是宙斯...艾倪书焚....
- Html js和jquery制作导航条时鼠标快速滑动导致下拉菜单不断执行
- 20个最炫HTML5,jQuery和CSS3下拉菜单制作教程(附示例/源码)
- jQuery+Superfish制作下拉菜单
- 用JQuery制作简单实用的下拉菜单
- 15个精心挑选的 jQuery 下拉菜单制作教程
- 15个精心挑选的 jQuery 下拉菜单制作教程
- jQuery+Superfish制作下拉菜单
- jquery实现多级下拉菜单的实例代码
- CSS绿色水平多级下拉菜单
- jquery 实现多级下拉菜单
- jQuery左侧带小图标的多级下拉菜单
- jquery导航插件制作二级下拉菜单列表1
- jQuery cxSelect 多级联动下拉菜单
- jQuery+Superfish制作下拉菜单