手机菜单 css

基础概念

手机菜单（通常指的是移动设备上的导航菜单）是网页或应用程序中的一个重要组成部分，用于提供用户访问不同功能或页面的入口。CSS（层叠样式表）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，开发者可以控制菜单的外观，如布局、颜色、字体、动画等。

类型

下拉菜单：点击按钮后展开的下拉列表。
侧边栏菜单：通常位于屏幕一侧，可以通过滑动或点击图标打开。
汉堡菜单：由三条横线组成的图标，点击后展开菜单。
底部导航菜单：位于屏幕底部，包含几个主要功能的图标。

应用场景

移动网站
移动应用程序
响应式网页设计

示例代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Menu</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .menu-toggle {
            display: block;
            cursor: pointer;
            padding: 10px;
            background-color: #333;
            color: #fff;
            text-align: center;
        }
        .menu-toggle span {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            background-color: #fff;
            transition: all 0.3s ease-in-out;
        }
        .nav {
            display: none;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav li {
            padding: 10px;
            background-color: #f9f9f9;
        }
        .nav li a {
            text-decoration: none;
            color: #333;
        }
        .active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 6px);
        }
        .active span:nth-child(2) {
            opacity: 0;
        }
        .active span:nth-child(3) {
            transform: rotate(-45deg) translate(4px, -7px);
        }
        @media (min-width: 768px) {
            .menu-toggle {
                display: none;
            }
            .nav {
                display: flex;
                justify-content: space-around;
                background-color: #333;
            }
            .nav li {
                padding: 10px;
                background-color: transparent;
            }
            .nav li a {
                color: #fff;
            }
        }
    </style>
</head>
<body>
    <div class="menu-toggle" onclick="toggleMenu()">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <ul class="nav">
        <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>
    <script>
        function toggleMenu() {
            document.querySelector('.nav').classList.toggle('active');
            document.querySelector('.menu-toggle').classList.toggle('active');
        }
    </script>
</body>
</html>