css加减号导航

CSS加减号导航基础概念

CSS加减号导航（也称为汉堡菜单或导航栏）是一种常见的网页设计元素，用于在移动设备或小屏幕上提供一个简洁的导航方式。它通常由三个水平线组成，形似汉堡包，因此得名。点击这个图标可以展开或收起一个包含多个导航链接的菜单。

类型

基础汉堡菜单：最简单的形式，点击图标展开菜单。
带标签的汉堡菜单：在图标旁边显示一个标签，提示用户点击后会有菜单展开。
动画效果：点击图标时，菜单展开和收起有动画效果，增加视觉吸引力。

应用场景

移动设备网页
小屏幕设备网页
需要简洁导航的网站

示例代码

以下是一个简单的CSS加减号导航的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 加减号导航</title>
    <style>
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            padding: 10px;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            padding: 14px 20px;
        }
        .navbar .icon {
            display: none;
        }
        .navbar ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        .navbar ul li {
            margin-right: 10px;
        }
        @media screen and (max-width: 600px) {
            .navbar a:not(:first-child) {
                display: none;
            }
            .navbar .icon {
                display: block;
                cursor: pointer;
            }
            .navbar.responsive {
                flex-direction: column;
            }
            .navbar.responsive ul {
                display: block;
            }
            .navbar.responsive ul li {
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
    <div class="navbar" id="myNavbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
        <div class="icon" onclick="toggleMenu()">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>

    <script>
        function toggleMenu() {
            var navbar = document.getElementById("myNavbar");
            if (navbar.className === "navbar") {
                navbar.className += " responsive";
            } else {
                navbar.className = "navbar";
            }
        }
    </script>
</body>
</html>