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

最新推荐文章于 2025-02-10 18:55:48 发布

小那同学

最新推荐文章于 2025-02-10 18:55:48 发布

阅读量3.4k

点赞数 24

分类专栏：前端文章标签： html html5 css3 javascript

本文链接：https://blog.youkuaiyun.com/bjjgff/article/details/137741040

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何利用HTML、CSS和JavaScript创建一个可适应不同屏幕尺寸的响应式导航栏，包括HTML结构、CSS样式、媒体查询以及JavaScript实现的菜单图标交互，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

随着互联网技术的飞速发展，用户体验在网页设计中的重要性日益凸显。其中，导航栏作为网页的“指南针”，不仅能帮助用户快速定位所需内容，还能体现网站的整体风格和设计理念。本文将介绍如何使用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');  
});

五、效果展示