css左侧折叠导航菜单

基础概念

CSS左侧折叠导航菜单是一种常见的网页设计元素，用于在页面左侧展示一个可折叠的导航栏。这种菜单通常包含多个子菜单项，用户可以通过点击或悬停来展开或折叠子菜单。

类型

纯CSS实现：使用CSS的伪类和过渡效果来实现折叠效果。
JavaScript辅助：结合JavaScript来实现更复杂的折叠逻辑和动画效果。

应用场景

网站导航
企业内部管理系统
个人博客

示例代码

以下是一个简单的纯CSS实现左侧折叠导航菜单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Left Foldable Navigation Menu</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .nav {
            width: 200px;
            height: 100vh;
            background-color: #333;
            color: white;
            overflow-y: auto;
            transition: width 0.3s;
        }
        .nav.collapsed {
            width: 50px;
        }
        .nav ul {
            list-style-type: none;
            padding: 0;
        }
        .nav li {
            padding: 10px;
            cursor: pointer;
        }
        .nav li:hover {
            background-color: #555;
        }
        .nav li ul {
            display: none;
            padding-left: 20px;
        }
        .nav li:hover > ul {
            display: block;
        }
    </style>
</head>
<body>
    <div class="nav" id="nav">
        <ul>
            <li>Menu 1
                <ul>
                    <li>Submenu 1.1</li>
                    <li>Submenu 1.2</li>
                </ul>
            </li>
            <li>Menu 2
                <ul>
                    <li>Submenu 2.1</li>
                    <li>Submenu 2.2</li>
                </ul>
            </li>
            <li>Menu 3
                <ul>
                    <li>Submenu 3.1</li>
                    <li>Submenu 3.2</li>
                </ul>
            </li>
        </ul>
    </div>
    <button onclick="toggleNav()">Toggle Nav</button>

    <script>
        function toggleNav() {
            const nav = document.getElementById('nav');
            nav.classList.toggle('collapsed');
        }
    </script>
</body>
</html>

参考链接

CSS-Tricks: Collapsible Navigation Menus

常见问题及解决方法

菜单展开/折叠动画不流畅：
- 确保CSS过渡效果设置正确，例如transition: width 0.3s;。
- 避免在动画过程中进行复杂的计算或DOM操作。

子菜单显示不正确：
- 确保子菜单的display属性设置正确，例如display: none;和display: block;。
- 使用CSS选择器确保子菜单在正确的父元素悬停时显示。
JavaScript逻辑错误：
- 确保JavaScript函数正确绑定到按钮点击事件。
- 使用classList.toggle方法来切换类名，确保类名正确应用。

通过以上方法，可以有效地实现和调试CSS左侧折叠导航菜单。