首页 > 代码库 > jQuery制作水平多级下拉菜单

jQuery制作水平多级下拉菜单

2024-07-18 16:56:01   217人阅读

本篇体验使用jQuery制作水平的、多级的、下拉菜单。

 

下拉菜单的html部分如下。

<body>
    <nav class="main-nav">
        <ul class="nav-list">
            <li><a href="http://www.mamicode.com/#">主页</a></li>
            <li><a href="http://www.mamicode.com/#">产品</a></li>
            <li><a href="http://www.mamicode.com/#">服务</a>
                <ul class="dropdown">
                    <li><a href="http://www.mamicode.com/#">网页设计</a></li>
                    <li><a href="http://www.mamicode.com/#">图形设计</a></li>
                    <li><a href="http://www.mamicode.com/#">视频制作</a></li>
                </ul>
            </li>
            <li><a href="http://www.mamicode.com/#">联系我们</a></li>
        </ul>
    </nav>
</body>

1

 

写一个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="http://www.mamicode.com/DropDownMenu.css" rel="stylesheet" />
3
 
一级菜单设置完了，接下来设置下拉菜单部分。需要把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;
}
6
 
还有一点，我们希望在显示菜单的时候，首先隐藏二级菜单。在.dropdown增加一个display属性。
.dropdown {
    display: none;
    list-style: none;
    position: relative;
    top: 40px;
    padding-left: 0;
    width: 120px;
}
5
 
最后，就到了jquery部分了。我们希望:当把鼠标移动到具有二级菜单的li时，让对应的二级ul出现，而当鼠标移出具有二级菜单的li时，让对应的二级ul消失。
    <script src="http://www.mamicode.com/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>
6
 
总结：
1、为了确保li和子元素a区域大小一致，需要把li设置为相对定位,把a设置为绝对定位，并且两者的宽和高保持一致。
2、为了确保二级菜单ul的位置在一级li的正下方，需要把二级菜单的ul设置为相对定位。
3、jquery中$(this)是指当前上下文。
 






























        

            
                
                  
                
                

                    联系

                    我们