在移动设备中单击项目时折叠导航栏

基础概念

在移动设备中，导航栏通常位于屏幕的顶部或底部，用于提供应用程序的主要功能和页面之间的导航。折叠导航栏（也称为汉堡菜单或侧滑菜单）是一种常见的设计模式，当用户单击导航栏上的图标时，会展开一个包含多个选项的菜单。

优势

节省空间：折叠导航栏在屏幕上占用的空间较少，适合移动设备的屏幕尺寸。
用户体验：通过单击图标展开菜单，用户可以轻松访问应用程序的主要功能，而不需要在屏幕上滑动或滚动。
一致性：这种设计模式在许多流行的移动应用中被广泛使用，用户容易理解和操作。

类型

汉堡菜单：最常见的折叠导航栏类型，通常由三条水平线组成。
侧滑菜单：当用户单击图标时，菜单从屏幕边缘滑出。

应用场景

折叠导航栏适用于需要展示多个主要功能或页面的应用程序，尤其是在屏幕空间有限的情况下。

实现方法

以下是一个使用HTML、CSS和JavaScript实现折叠导航栏的简单示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foldable Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="navbar-toggle" id="js-navbar-toggle">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
        <ul class="main-nav" id="js-menu">
            <li><a href="#" class="nav-links">Home</a></li>
            <li><a href="#" class="nav-links">About</a></li>
            <li><a href="#" class="nav-links">Services</a></li>
            <li><a href="#" class="nav-links">Contact</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 1rem;
}

.main-nav {
    list-style-type: none;
    display: none;
    flex-direction: column;
    width: 100%;
}

.nav-links {
    text-decoration: none;
    color: white;
    padding: 1rem;
}

.navbar-toggle {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 21px;
}

.bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }

    .main-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: auto;
    }
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function () {
    const toggleButton = document.getElementById('js-navbar-toggle');
    const menu = document.getElementById('js-menu');

    toggleButton.addEventListener('click', function () {
        menu.classList.toggle('active');
    });
});