让我们使用 HTML、CSS 和 JavaScript 构建一个响应式导航栏和汉堡菜单。首先从 HTML 开始，然后添加 CSS 重置，最后逐个为元素添加样式。

2025-05-24

让我们使用 HTML、CSS 和 Javascript 构建一个响应式导航栏和汉堡菜单。

那么让我们从 HTML 开始吧，

现在让我们添加 CSS 重置

现在让我们逐个为元素添加样式，

大家好！在本教程中，我们将使用 html、css 和少量 JavaScript 代码构建一个响应式导航栏和汉堡菜单。

它看起来是这样的，

替代文本

Github链接：

GitHub 徽标 dev-ggaurav /响应式汉堡教程

那么让我们从 HTML 开始吧，


 HTML
<header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">WebDev.</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

在这里，我们有

  • header其类header作为我们的导航栏的容器
  • nav与类navbar
  • 与以下类别的链接nav-logo
  • ul与类nav-menu
  • 里面ul有 4 个li类nav-item
  • 在每个里面，nav-item我们都有一个与类的链接nav-link
  • 对于我们的汉堡包，我添加了一个div带有类的hamburger，其中我们有 3span个带有类的bar

这就是我们需要的 HTML。

现在让我们添加 CSS 重置

（这里我们将导入我们需要的字体并添加一些基本的 CSS 来重置所有默认样式。


 CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');

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

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

现在让我们逐个为元素添加样式，

  • header和navbar

 CSS
.header{
    border-bottom: 1px solid #E2E8F0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode
  • hamburger样式

 CSS
.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}
Enter fullscreen mode Exit fullscreen mode
  • 我们其他元素的基本样式 ``` CSS .nav-menu { display: flex; justify-content: space-between; align-items: center; }

.nav-item {
左边距：5rem;
}

.nav-link{
字体大小：1.6rem；
字体粗细：400；
颜色：#475569；
}

.nav-link：悬停{
颜色：#482ff7；
}

.nav-logo {
字体大小：2.1rem；
字体粗细：500；
颜色：#482ff7；
}

### After this, It should look like this,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn6yu5tlo21go91u1tlh.png)

# But It's not responsive yet, so let's add the media queries.
Enter fullscreen mode Exit fullscreen mode


CSS
@media仅屏幕和（最大宽度：768px）{
.nav-menu {
位置：固定；
左侧：-100%；
顶部：5rem；
弹性方向：列；
背景颜色：#fff；
宽度
：100%；边框半径：10px；
文本对齐：居中；
过渡：0.3s；
盒子阴影：
0 10px 27px rgba（0，0，0，0.05）；
}

.nav-menu.active {
    left: 0;
}

.nav-item {
    margin: 2.5rem 0;
}

.hamburger {
    display: block;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

}

What this media query does is, hides our `nav-menu` by setting `position: fixed;`  `left: -100%;` on it.
Also, we set our `hamburger` to `display: block;` so it's visible now. 
We have also added an extra class that is `.nav-menu.active` which sets `left: 0;` on the `nav-menu`. Now we will have to add the javascript which will add this `active` class on the nav-menu when we click our hamburger.

# Let's add the javascript.
Enter fullscreen mode Exit fullscreen mode


Javascript
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener(“点击”, mobileMenu);

函数 mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}


Here the function `mobileMenu()` also adds an `active` class on our `hamburger` and our `nav-menu` which makes our mobile menu open.  we can use the active class on the hamburger to create that X animation when we click on the `hamburger`. so let's do that now.
Enter fullscreen mode Exit fullscreen mode


CSS
// 媒体查询内部。

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
Enter fullscreen mode Exit fullscreen mode 
### It should look like this now,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gct0bbbmkpj4vugpq6rw.gif)


## But there is a catch, the hamburger menu doesn't close when we click a link. So let's add that now,
Enter fullscreen mode Exit fullscreen mode


Javascript
const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("点击", closeMenu));

函数 closeMenu() {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}


The `closeMenu()` function removes the `active` class from both the `nav-menu` and the `hamburger` which makes our mobile menu close.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5h5uh2ed6a7esevmulw.gif)

So that's it guys we built a responsive navbar and hamburger menu with HTML CSS and javascript. Hope u liked it. Share this article. Thank you 😀
Enter fullscreen mode Exit fullscreen mode
文章来源：https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci
Devto 翻译
PREV
让我们使用 HTML 和 CSS 创建一个自定义切换开关。步骤 1 - HTML。步骤 2 - 基本样式。步骤 3 - 创建切换按钮滑块并隐藏复选框。步骤 4 - 添加功能。
NEXT
使用 HTML 和 CSS 构建一个简单的卡片骨架加载器组件。步骤 1 - HTML 步骤 2 - 添加卡片和骨架的通用样式。步骤 3 - 添加卡片特定样式。步骤 4 - 添加骨架特定样式。步骤 5 - 添加动画