jQuery制作水平多级下拉菜单

本篇体验使用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)是指当前上下文。

巴特西

jQuery制作水平多级下拉菜单

最新文章

热门文章