js怎么写二级菜单

JavaScript 编写二级菜单的方法

使用JavaScript编写二级菜单的关键是创建一个动态、用户友好的导航系统。你可以使用事件监听、DOM 操作、样式切换等技术。

1. 准备HTML结构

首先，需要准备HTML结构，包括一级菜单和隐藏的二级菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单示例</title>
    <style>
        /* 基本样式 */
        ul { list-style-type: none; padding: 0; margin: 0; }
        li { position: relative; }
        .submenu { display: none; position: absolute; top: 100%; left: 0; }
        li:hover .submenu { display: block; }
    </style>
</head>
<body>
    <ul id="menu">
        <li>一级菜单1
            <ul class="submenu">
                <li>二级菜单1-1</li>
                <li>二级菜单1-2</li>
            </ul>
        </li>
        <li>一级菜单2
            <ul class="submenu">
                <li>二级菜单2-1</li>
                <li>二级菜单2-2</li>
            </ul>
        </li>
    </ul>
</body>
</html>

2. 编写JavaScript代码

接下来，我们需要编写JavaScript代码来实现二级菜单的显示和隐藏。

document.addEventListener('DOMContentLoaded', function () {
    var menuItems = document.querySelectorAll('#menu > li');
    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';
            }
        });
    });
});

3. 样式和用户体验

为了提升用户体验，可以添加一些过渡效果和样式。

/* 添加过渡效果 */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
li:hover .submenu {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

4. 优化JavaScript代码

为了使代码更加模块化和可维护，可以将显示和隐藏逻辑封装成函数。

document.addEventListener('DOMContentLoaded', function () {
    var menuItems = document.querySelectorAll('#menu > li');
    function showSubmenu(menuItem) {
        var submenu = menuItem.querySelector('.submenu');
        if (submenu) {
            submenu.style.display = 'block';
        }
    }
    function hideSubmenu(menuItem) {
        var submenu = menuItem.querySelector('.submenu');
        if (submenu) {
            submenu.style.display = 'none';
        }
    }
    menuItems.forEach(function (menuItem) {
        menuItem.addEventListener('mouseover', function () {
            showSubmenu(menuItem);
        });
        menuItem.addEventListener('mouseout', function () {
            hideSubmenu(menuItem);
        });
    });
});

5. 响应式设计

为了使菜单在移动设备上也能良好显示，可以添加响应式设计。

@media (max-width: 768px) {
    .submenu {
        position: static;
        display: none;
    }
    li:hover .submenu {
        display: block;
    }
}

总结

通过以上步骤，我们使用JavaScript和CSS成功创建了一个响应式的二级菜单。核心步骤包括准备HTML结构、编写JavaScript代码来控制菜单的显示和隐藏、优化代码以及添加样式以提升用户体验。这种方法不仅适用于桌面设备，也可以通过响应式设计适配移动设备。

js怎么写二级菜单

相关问答FAQs：