当我缩小屏幕尺寸时，“汉堡包”图标和导航链接不会出现

Question

我有一个使用 html、css 和 js 创建的导航栏。我添加了一些媒体查询来处理屏幕尺寸的减小，并且我希望当屏幕缩小到较小尺寸时出现“汉堡包”菜单。然而，当我调整大小时，

nav

链接完全消失，并且汉堡菜单根本不出现。

function toggleMenu() {
  console.log('Function called...');
  const navLinks = document.querySelector('.nav-links');
  navLinks.classList.toggle('open');
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  padding: 10px 20px;
}

.nav-links ul {
  list-style-type: none;
  /* display: inline; */
  display: flex;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

.nav-links li {
  margin-right: 25px;
  letter-spacing: 1.2px;
}

.nav-links a {
  text-decoration: none;
  font-weight: 200;
  color: black;
}

.logo {
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 1.5px;
  color: black;
}

.nav-toggle {
  /* display: none; */
  font-size: 22px;
  cursor: pointer;
  color white;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #333;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links ul {
    flex-direction: column;
    padding: 10px 20px;
  }
  .nav-toggle {
    display: block;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/navigation.css" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
  <title>Tax Corrector</title>
</head>

<body>
  <header class="header">
    <div class="logo">Tax Corrector</div>
    <div class="nav-toggle"></div>
    <nav class="nav-links">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </nav>
  </header>
  <script src="main.js"></script>
</body>

</html>

Answer 1

我将内容添加到
```
.nav-toggle
```
我从其样式中删除了
```
color: white;
```
我添加了一个
```
onclick
```
处理程序来调用您的
```
toggleMenu()
```
函数

function toggleMenu() {
  const navLinks = document.querySelector('.nav-links');
  navLinks.classList.toggle('open');
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  padding: 10px 20px;
}

.nav-links ul {
  list-style-type: none;
  /* display: inline; */
  display: flex;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

.nav-links li {
  margin-right: 25px;
  letter-spacing: 1.2px;
}

.nav-links a {
  text-decoration: none;
  font-weight: 200;
  color: black;
}

.logo {
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 1.5px;
  color: black;
}

.nav-toggle {
  display: none;
  font-size: 42px;
  cursor: pointer;
/*  color: white; */
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #333;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links ul {
    flex-direction: column;
    padding: 10px 20px;
  }
  .nav-toggle {
    display: block;
  }
}

<header class="header">
    <div class="logo">Tax Corrector</div>
    <div class="nav-toggle" onclick="toggleMenu()">🍔</div>
    <nav class="nav-links">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </nav>
  </header>

当我缩小屏幕尺寸时，“汉堡包”图标和导航链接不会出现

问题描述投票：0回答：1

1个回答

最新问题

当我缩小屏幕尺寸时，“汉堡包”图标和导航链接不会出现

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1