【JavaWeb】HTML+JS+CSS实现导航栏下拉菜单（详细）

原创已于 2023-07-16 15:14:01 修改 · 4k 阅读

52 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css

于 2023-07-16 15:10:35 首次发布

该文章展示了如何利用HTML构建二级菜单结构，通过CSS进行样式设计，并借助jQuery实现鼠标悬停时二级菜单的滑动显示和隐藏效果。CSS代码着重于布局和样式，而JavaScript部分则处理交互行为。

效果：

html页面

<body>
    <div class="menu">
        <ul>
            <li>
                <a href="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

JS代码

    <script>
        $(function() {
            $(".menu>ul>li").hover(function() {
                $(this.querySelector("ul")).slideToggle()
            })
        })
    </script>

JS代码详解：

$(function() { ... }): 这是jQuery的快捷方式，用于在DOM加载完成后执行代码。它等价于 $(document).ready(function() { ... })，表示代码会在页面加载完成后执行。
$(".menu>ul>li").hover(function() { ... }): 这是一个选择器，它选中所有具有"class"为"menu"的元素中的直接子元素的<li>（列表项）。然后，通过.hover()方法为这些<li>元素添加悬停事件的监听。
function() { ... }: 这是一个悬停事件的回调函数。当鼠标悬停在匹配的菜单项上时，这个函数会被执行。
$(this.querySelector("ul")).slid

Toggle(): 在悬停事件回调函数中，首先使用this来获取当前鼠标悬停的菜单项元素。然后，通过querySelector("ul")来选择这个菜单项元素下的<ul>（无序列表，也就是子菜单）元素。接着，通过.slideToggle()方法来切换子菜单的显示状态，如果子菜单是隐藏的，则显示它；如果子菜单是显示的，则隐藏它。.slideToggle()方法会为显示和隐藏添加动画效果。

CSS代码

* {
        padding: 0;
        margin: 0;
    }
    
    .menu {
        background: #910000;
    }
    
    .menu>ul {
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: auto;
    }
    
    .menu ul li {
        list-style: none;
    }
    
    .menu>ul>li {
        position: relative;
    }
    
    .menu ul li a {
        padding: 10px;
        display: block;
        color: white;
        text-decoration: none;
    }
    
    .menu ul ul {
        position: absolute;
        width: 100%;
        background: #910000;
        display: none;
    }

CSS代码详解：

* 选择器将页面上所有元素的内边距和外边距设置为0，以消除默认的内边距和外边距。
.menu 类选择器选中具有 “menu” 类的元素，设置了背景颜色为深红色 (#910000)。
.menu>ul 选择器选中直接子元素是 ul 的 .menu 元素，将其样式设置为弹性布局 (display: flex)，并使用 justify-content: space-between 属性使子元素在水平方向上等间距分布。
.menu ul li 选择器选中所有 ul 元素下的 li 元素，并移除其默认的列表样式。
.menu>ul>li 选择器选中 .menu 元素下的直接子元素 li，设置其位置为相对定位。
.menu ul li a 选择器选中所有 ul 元素内的 li 元素中的锚点 (<a> 标签)，设置了内边距、显示为块级元素、文字颜色为白色、去除下划线。
.menu ul ul 选择器选中 ul 元素的子 ul 元素（子菜单），设置其位置为绝对定位，宽度为100%，背景颜色与父菜单一致，且初始状态为不显示。