js 怎么做二级菜单栏

如何使用JavaScript创建二级菜单栏

使用JavaScript创建二级菜单栏的核心步骤包括：定义HTML结构、编写CSS样式、使用JavaScript实现交互。以下将详细介绍如何通过这三个步骤来实现一个二级菜单栏。

一、定义HTML结构

首先，我们需要创建一个基本的HTML结构来表示菜单栏及其子菜单。HTML结构的设计需要简单明了，便于后续的CSS和JavaScript操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单栏示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul class="menu">
            <li class="menu-item">
                <a href="#">主菜单1</a>
                <ul class="submenu">
                    <li><a href="#">子菜单1-1</a></li>
                    <li><a href="#">子菜单1-2</a></li>
                    <li><a href="#">子菜单1-3</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="#">主菜单2</a>
                <ul class="submenu">
                    <li><a href="#">子菜单2-1</a></li>
                    <li><a href="#">子菜单2-2</a></li>
                    <li><a href="#">子菜单2-3</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="#">主菜单3</a>
                <ul class="submenu">
                    <li><a href="#">子菜单3-1</a></li>
                    <li><a href="#">子菜单3-2</a></li>
                    <li><a href="#">子菜单3-3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

二、编写CSS样式

接下来，为了使菜单栏和子菜单看起来更美观和功能齐全，我们需要编写一些基本的CSS样式。

/* styles.css */
body {
    font-family: Arial, sans-serif;
}
nav {
    background-color: #333;
}
.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.menu-item {
    float: left;
    position: relative;
}
.menu-item a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.menu-item a:hover {
    background-color: #111;
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    list-style-type: none;
    margin: 0;
    padding: 0;
    min-width: 160px;
}
.submenu li a {
    padding: 12px 16px;
    color: white;
}
.submenu li a:hover {
    background-color: #575757;
}

三、使用JavaScript实现交互

最后，我们编写JavaScript代码，使得当用户悬停在主菜单项上时，子菜单项显示出来。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    var menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(function(menuItem) {
        menuItem.addEventListener('mouseover', function() {
            var submenu = menuItem.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'block';
            }
        });
        menuItem.addEventListener('mouseout', function() {
            var submenu = menuItem.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'none';
            }
        });
    });
});

详细解析

1、定义HTML结构

HTML结构的核心是包含主菜单项和子菜单项的列表。主菜单项使用<li>标签表示，并包含一个链接<a>标签。每个主菜单项下都包含一个子菜单列表<ul>，其中的每个子菜单项也使用<li>标签表示。

2、编写CSS样式

CSS样式的核心是通过display属性控制子菜单的显示和隐藏。默认情况下，子菜单通过display: none隐藏。当用户悬停在主菜单项上时，通过JavaScript改变子菜单的display属性为block，使其显示出来。

3、使用JavaScript实现交互

JavaScript代码的核心是监听主菜单项的mouseover和mouseout事件。在mouseover事件中，找到对应的子菜单，并将其display属性设置为block。在mouseout事件中，将子菜单的display属性重置为none，从而实现子菜单的显示和隐藏。

通过以上步骤，我们可以使用JavaScript创建一个功能完备的二级菜单栏。这种方法不仅简单易行，而且具有良好的可维护性和扩展性。在实际项目中，可以根据具体需求对菜单栏进行进一步的优化和定制。