js垂直菜单怎么做

一、JS垂直菜单制作方法

核心观点：使用HTML和CSS构建结构和样式、利用JavaScript实现交互效果、动态生成菜单、支持多级菜单。 在制作JS垂直菜单时，首先需要使用HTML和CSS来搭建菜单的基本结构和样式，然后利用JavaScript来实现交互效果，如展开和折叠菜单项。在详细描述中，我们将讨论如何动态生成菜单，并实现多级菜单的支持，这样可以让菜单更具灵活性和可扩展性。

详细描述：使用HTML和CSS构建结构和样式是制作JS垂直菜单的基础。通过定义HTML标签和CSS样式，我们可以确定菜单的外观和基本布局。

二、使用HTML和CSS构建结构和样式

在开始使用JavaScript实现交互效果之前，我们需要先使用HTML和CSS构建菜单的基本结构和样式。

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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul class="vertical-menu">
            <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>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们使用CSS定义菜单的样式：

body {
    font-family: Arial, sans-serif;
}
nav {
    width: 200px;
}
.vertical-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.vertical-menu li {
    border: 1px solid #ccc;
    margin-bottom: -1px;
}
.vertical-menu li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
}
.vertical-menu li a:hover {
    background-color: #f0f0f0;
}

三、利用JavaScript实现交互效果

为了让菜单具有交互性，我们需要使用JavaScript来实现展开和折叠菜单项的效果。

JavaScript代码

下面是一个简单的JavaScript代码示例，展示如何实现菜单项的展开和折叠：

document.addEventListener('DOMContentLoaded', function () {
    const menuItems = document.querySelectorAll('.vertical-menu li a');
    menuItems.forEach(item => {
        item.addEventListener('click', function (e) {
            const subMenu = this.nextElementSibling;
            if (subMenu && subMenu.tagName === 'UL') {
                e.preventDefault();
                subMenu.classList.toggle('open');
            }
        });
    });
});

CSS样式更新

为了让展开和折叠效果生效，我们还需要更新CSS样式：

.vertical-menu ul {
    display: none;
}
.vertical-menu ul.open {
    display: block;
}

四、动态生成菜单

在一些情况下，菜单项可能需要根据动态数据生成。我们可以使用JavaScript来动态创建菜单项。

动态生成菜单项的JavaScript代码

下面是一个示例代码，展示如何使用JavaScript动态生成菜单项：

document.addEventListener('DOMContentLoaded', function () {
    const menuData = [
        { text: '首页', link: '#' },
        { text: '关于我们', link: '#' },
        { text: '服务', link: '#' },
        { text: '产品', link: '#' },
        { text: '联系我们', link: '#' }
    ];
    const menu = document.querySelector('.vertical-menu');
    menuData.forEach(item => {
        const li = document.createElement('li');
        const a = document.createElement('a');
        a.href = item.link;
        a.textContent = item.text;
        li.appendChild(a);
        menu.appendChild(li);
    });
});

五、支持多级菜单

在实际应用中，菜单可能包含多级结构。我们可以通过递归的方式生成多级菜单，并通过JavaScript实现其展开和折叠效果。

多级菜单的HTML结构

为了支持多级菜单，我们需要稍微修改HTML结构：

<nav>
    <ul class="vertical-menu">
        <li>
            <a href="#">首页</a>
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

多级菜单的CSS样式

我们需要更新CSS样式，以支持多级菜单的样式：

.vertical-menu ul {
    display: none;
    padding-left: 20px;
}
.vertical-menu ul.open {
    display: block;
}

多级菜单的JavaScript代码

下面是更新后的JavaScript代码，支持多级菜单的展开和折叠效果：

document.addEventListener('DOMContentLoaded', function () {
    const menuItems = document.querySelectorAll('.vertical-menu li > a');
    menuItems.forEach(item => {
        item.addEventListener('click', function (e) {
            const subMenu = this.nextElementSibling;
            if (subMenu && subMenu.tagName === 'UL') {
                e.preventDefault();
                subMenu.classList.toggle('open');
            }
        });
    });
});

六、总结

通过以上步骤，我们已经完成了一个基本的JS垂直菜单制作，包括使用HTML和CSS构建结构和样式、利用JavaScript实现交互效果、动态生成菜单以及支持多级菜单。使用HTML和CSS构建结构和样式是制作JS垂直菜单的基础，利用JavaScript实现交互效果可以让菜单具有动态性和交互性，动态生成菜单能够提高灵活性和可扩展性，支持多级菜单则使菜单结构更加丰富和复杂。

在实际项目中，使用项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile可以帮助团队更高效地协作和管理项目，确保菜单的开发和维护过程更加顺利。