您的位置：首页 > Web前端 > JQuery

jQuery制作水平多级下拉菜单

2014-08-21 10:28 267 查看
本篇体验使用jQuery制作水平的、多级的、下拉菜单。

下拉菜单的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)是指当前上下文。


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航