🪴qql1's digital garden

原生导航栏

3分钟阅读

实例

实现一个导航栏（Navigation Bar），可以使用HTML和CSS来构建一个基本的、响应式的导航栏。以下是一个示例代码，包括HTML和CSS，展示了如何实现一个简单的导航栏。

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="navbar-logo">
            <a href="#">Logo</a>
        </div>
        <ul class="navbar-menu">
            <li class="navbar-item"><a href="#">主页</a></li>
            <li class="navbar-item"><a href="#">关于我们</a></li>
            <li class="navbar-item"><a href="#">服务</a></li>
            <li class="navbar-item"><a href="#">联系我们</a></li>
        </ul>
        <div class="navbar-toggle" id="navbar-toggle">
            &#9776;
        </div>
    </nav>
    <script>
        document.getElementById('navbar-toggle').onclick = function() {
            var menu = document.querySelector('.navbar-menu');
            if (menu.style.display === 'block') {
                menu.style.display = 'none';
            } else {
                menu.style.display = 'block';
            }
        }
    </script>
</body>
</html>

CSS代码

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px 20px;
    color: white;
}
.navbar-logo a {
    color: white;
    text-decoration: none;
    font-size: 1.5em;
}
.navbar-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar-item a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}
.navbar-item a:hover {
    background-color: #575757;
}
.navbar-toggle {
    display: none;
    font-size: 1.5em;
    cursor: pointer;
}
@media (max-width: 768px) {
    .navbar-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-item a {
        padding: 10px 0;
        text-align: center;
    }
    
    .navbar-toggle {
        display: block;
    }
}

解释

  1. HTML部分：
    • 包含一个导航栏<nav>，其中有三个主要部分：navbar-logo（导航栏的logo），navbar-menu（导航项列表），和navbar-toggle（在小屏幕设备上显示的菜单按钮）。
    • 使用了一个简单的JavaScript脚本来处理导航栏在小屏幕上的显示和隐藏功能。
  2. CSS部分：
    • 使用Flexbox布局来实现导航栏的布局。
    • 设置导航栏在大屏幕和小屏幕设备上的不同样式。
    • @media查询用于在屏幕宽度小于768px时调整导航栏的样式，使导航菜单变成隐藏状态，并显示一个菜单按钮。 这段代码提供了一个基础的导航栏结构，可以根据需要进一步扩展和定制，比如增加更多的样式、动画效果或者使用JavaScript库（如jQuery）来增强交互性。

关系图谱

反向链接