导航菜单到汉堡菜单答案

【问题标题】：Navigation menu to Burger Menu导航菜单到汉堡菜单
【发布时间】：2021-12-11 06:47:52
【问题描述】：

我正在尝试使我的导航栏菜单具有响应性。我尝试通过多种方式实现它，但我无法点击汉堡按钮。我开始想也许我需要喜欢一个 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')
        })
    }

你认为是什么问题

【问题讨论】：

标签： javascript css responsive-design navbar hamburger-menu

【解决方案1】：

    @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);  
}

#hamburger {
    font-size: 36px;
    color: #eee;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<title>Showpra</title>
<body>
<nav class="main-nav">
    <div class="logo">Nav</div>
    <div id="hamburger" class="fa fa-bars" onclick="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>
</nav> 
<scrip src="script.js"></scrip>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> </body> </html>
<script>
    function nav(){
        $('.nav-links').toggle();
    }
</script>

【讨论】：

它解决了点击问题，但汉堡按钮总是在那里。如果窗户很小，我怎样才能显示它。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

改变你的js点击一次，菜单显示，双击隐藏

    function nav() {
  var x = document.getElementById("burger");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

您可以查看有关响应式汉堡菜单的详细文章 https://learnjsx.com/category/1/posts/responsive-css-import

【讨论】：

感谢您的尝试，但没有成功