jQuery制作水平多级下拉菜单

时间:2021-10-13 10:38:14

本篇体验使用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>

jQuery制作水平多级下拉菜单

写一个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" />

jQuery制作水平多级下拉菜单

一级菜单设置完了,接下来设置下拉菜单部分。需要把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;
}

jQuery制作水平多级下拉菜单

还有一点,我们希望在显示菜单的时候,首先隐藏二级菜单。在.dropdown增加一个display属性。

.dropdown {
    display: none;
    list-style: none;
    position: relative;
    top: 40px;
    padding-left: 0;
    width: 120px;
}

jQuery制作水平多级下拉菜单

最后,就到了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>

jQuery制作水平多级下拉菜单

总结:
1、为了确保li和子元素a区域大小一致,需要把li设置为相对定位,把a设置为绝对定位,并且两者的宽和高保持一致。
2、为了确保二级菜单ul的位置在一级li的正下方,需要把二级菜单的ul设置为相对定位。
3、jquery中$(this)是指当前上下文。