响应式导航栏不会做？看我一分钟学会制作导航栏！

引言

随着互联网技术的飞速发展，用户体验在网页设计中的重要性日益凸显。其中，导航栏作为网页的“指南针”，不仅能帮助用户快速定位所需内容，还能体现网站的整体风格和设计理念。本文将介绍如何使用HTML、CSS和JavaScript制作一个响应式导航栏，以适应不同屏幕尺寸，并提供优雅的用户体验。

一、导航栏的HTML结构

首先，我们需要构建导航栏的HTML骨架。这个导航栏包括一个Logo、一个菜单图标（用于在小屏幕上展开导航栏）、导航链接、搜索框和登录注册按钮。

创建一个名为 index.html的页面文件

<!DOCTYPE html>
<html lang="en"><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><div class="navbar" id="nav"><div class="logo">saycode.cn</div><div class="menu-icon" id="menuIcon"><span></span><span></span><span></span><span></span></div><ul id="navbarMenu"><li><a href="#">首页</a></li><li><a href="#">我的教程</a></li><li><a href="#">我的创意</a></li><div class="search-box"><input type="text" placeholder="Search..."></div><div class="buttons"><button class="login">登录</button><button class="register">注册</button></div></ul></div><script src="script.js"></script>
</body></html>

二、导航栏的CSS样式

接下来，我们使用CSS为导航栏添加样式。通过设置display: flex;，我们可以轻松实现导航栏元素的水平排列。同时，我们为不同元素定义了不同的样式，如Logo的字体大小和颜色、导航链接的悬停效果等。

创建一个名为 styles.css 样式文件

* {box-sizing: border-box;
}body {margin: 0;padding: 0;font-family: Arial, sans-serif;background-color: #ffe7df;
}.navbar {background-color: #ffffff;color: #fff;padding: 10px 40px;display: flex;align-items: center;justify-content: space-between;
}.logo {font-size: 24px;font-weight: bold;color: #232c53;
}.navbar ul {list-style-type: none;margin: 0;padding: 0;display: flex;align-items: center;
}.navbar li {position: relative;margin-right: 15px;
}.navbar li a {color: #777b91;text-decoration: none;padding: 10px;
}.navbar li a:hover {color: #141e46;
}.search-box {position: relative;
}.search-box input {width: 200px;height: 30px;border: none;padding: 5px 10px;border-radius: 6px;background-color: #eff6f8;
}.buttons {display: flex;
}.buttons button {margin-left: 10px;padding: 5px 10px;border: none;cursor: pointer;
}.login {color: #232c53;background-color: #fff;
}.register {color: #fff;background-color: #232c53;border-radius: 10px;
}

三、响应式设计

为了使导航栏在不同屏幕上都能良好地显示，我们使用了媒体查询（Media Query）。当屏幕宽度小于768px时，我们将隐藏导航链接、搜索框和按钮，并显示一个菜单图标。当用户点击该图标时，导航栏将展开显示所有元素。

/* 添加响应式设计的样式 */
@media screen and (max-width: 768px) {.navbar {position: relative;padding: 10px 10px;}/* 在小屏幕上隐藏导航栏和搜索框等 */.navbar ul,.search-box,.buttons {display: none;}/* 显示汉堡式图标 */.navbar .menu-icon {display: block;position: relative;width: 30px;height: 20px;cursor: pointer;}.navbar .menu-icon span {display: block;position: absolute;height: 4px;width: 100%;background: #232c53;border-radius: 4px;opacity: 1;left: 0;transform: rotate(0deg);transition: 0.25s ease-in-out;}.navbar .menu-icon span:nth-child(1) {top: 0px;}.navbar .menu-icon span:nth-child(2),.navbar .menu-icon span:nth-child(3) {top: 10px;}.navbar .menu-icon span:nth-child(4) {top: 20px;}/* 菜单展开时的样式 */.navbar.open .menu-icon span:nth-child(1) {top: 18px;width: 0%;left: 50%;}.navbar.open .menu-icon span:nth-child(2) {transform: rotate(45deg);}.navbar.open .menu-icon span:nth-child(3) {transform: rotate(-45deg);}.navbar.open .menu-icon span:nth-child(4) {top: 18px;width: 0%;left: 50%;}/* 展开菜单时的导航栏样式 */.navbar.open ul {display: flex;flex-direction: column;}.navbar.open .search-box,.navbar.open .buttons {display: block;}.search-box,.buttons {display: block;}#navbarMenu {width: 100%;flex-direction: column;gap: 10px;padding: 10px 0;background-color: #ffffff;border-radius: 10px;position: absolute;left: 0;bottom: -200px;text-align: center;}#navbarMenu li a {font-size: 20px;}
}

四、JavaScript交互

最后，我们使用JavaScript为菜单图标添加点击事件。当用户点击图标时，我们将为导航栏添加一个open类，以改变其样式并显示隐藏的元素。

创建一个名为 script.js 文件

document.getElementById('menuIcon').addEventListener('click', function () {  var navbar = document.getElementById('nav');  navbar.classList.toggle('open');  
});

五、效果展示