时间戳

首页 > 解决方案 > 导航菜单到汉堡菜单

javascript - 导航菜单到汉堡菜单

问题描述

我正在尝试使我的导航栏菜单响应。我尝试通过多种方式实现它，但我无法点击汉堡按钮。我开始想也许我需要喜欢一个 jquery 链接或确保我机器中的节点。

这是 HTML：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Showpra</title> </head> <body>
<nav class="main-nav">
    <div class="logo">Nav</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Connect</a></li>
   </ul>
   <div class="burger">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
   </div>
</nav>

    
<scrip src="script.js"></scrip>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> </body> </html>

这是 CSS ：

        @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');

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

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #444;
    font-family: 'Muli', sans-serif;
}

.logo
{
    color: white;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    background-color: coral;
    justify-content: space-around;
    width: 30%
}

.nav-links li {
    list-style: none;
}


.nav-links a{
    color:cyan;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger{
    display: none;
    cursor: pointer;
}

.burger div{
    width:25px;
    height: 5px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width:768px){

    body {
        overflow-x: hidden;
    }
   .nav-links {
       position: absolute;
       right: 50%; 
       height: 92vh; 
       top: 8vh;
       background-color: coral;
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 50%;
       transform: translateX(100%);
       transition: transform 0.5s ease-in;

    }

    .nav-links li{
        opacity: 10;
    }

    .burger {
        display: block;
    }
   }

  .nav-active {
       transform: translateX(0%);
   }

   @keyframes navLinkFade {
       from {
           opacity: 0;
           transform: translateX(50px);
       }

       to {
           opacity: 1;
           transform: translateX(0px);
       }
   }

.toggle .line1 {
    transform: rotate(-45deg) traslate(-5px, 6px);
}

.toggle .line2 {
       opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) traslate(-5px, 6px);  
}

This is the javaScript :

        document.addEventListener('DOMContentLoaded', nav)
    function nav(){
        const burger = document.querySelector('.burger');
        const nav = document.querySelector('.main-nav');
        burger.addEventListener('click', ()=>{
            nav.classList.toggle('show')
        })
    }

你认为是什么问题

标签： javascriptcssresponsive-designnavbarhamburger-menu

解决方案

在附加侦听器之前，该DOMContentLoaded事件可能已经触发。如果您不想使用该onclick属性，最好检查document.readyState，如下例所示。另外，仅供参考，您的 css 中没有show类，因此下面的代码切换了类，但该类实际上并没有做任何事情。

if (document.readyState !== 'loading') {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.main-nav');
  burger.addEventListener('click', () => {
    nav.classList.toggle('show')
  })
}
@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #444;
  font-family: 'Muli', sans-serif;
}

.logo {
  color: white;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  background-color: coral;
  justify-content: space-around;
  width: 30%
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: cyan;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 5px;
  background-color: white;
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 50%;
    height: 92vh;
    top: 8vh;
    background-color: coral;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 10;
  }
  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) traslate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) traslate(-5px, 6px);
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Showpra</title>
</head>

<body>
  <nav class="main-nav">
    <div class="logo">Nav</div>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Connect</a></li>
    </ul>
    <button onclick="toggleNav">Click</button>
    <div class="burger">
      <div class="line line1"></div>
      <div class="line line2"></div>
      <div class="line line3"></div>
    </div>
  </nav>


  <scrip src="script.js"></scrip>

推荐阅读