css手机菜单

CSS手机菜单基础概念

CSS手机菜单是指使用CSS（层叠样式表）技术来设计和实现适用于移动设备的导航菜单。这种菜单通常具有响应式设计，能够根据屏幕大小自动调整布局，以适应不同的设备。

类型

汉堡菜单：常见于移动设备，通过点击汉堡图标展开菜单。
下拉菜单：点击某个选项后，显示下拉列表。
侧滑菜单：通过滑动屏幕边缘来显示菜单。
底部导航栏：固定在屏幕底部，适用于底部导航。

应用场景

移动网站和应用
单页应用（SPA）
响应式网站

示例代码

以下是一个简单的汉堡菜单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Mobile Menu</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .menu-toggle {
            display: none;
            cursor: pointer;
        }
        .menu-toggle span {
            display: block;
            width: 30px;
            height: 4px;
            margin-bottom: 5px;
            position: relative;
            background: #333;
        }
        .nav {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #f2f2f2;
        }
        .nav ul {
            list-style: none;
            padding: 0;
            display: flex;
        }
        .nav ul li a {
            text-decoration: none;
            color: #333;
            padding: 10px;
        }
        @media (max-width: 600px) {
            .nav ul {
                display: none;
                flex-direction: column;
                width: 100%;
            }
            .nav ul.active {
                display: flex;
            }
            .menu-toggle {
                display: block;
            }
        }
    </style>
</head>
<body>
    <div class="menu-toggle" onclick="toggleMenu()">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <nav class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <script>
        function toggleMenu() {
            const nav = document.querySelector('.nav ul');
            nav.classList.toggle('active');
        }
    </script>
</body>
</html>