导航菜单到汉堡菜单

Question

I am trying to make my nav bar menu responsive.我正在尝试使我的导航栏菜单响应。 I tried to implement it through several ways but the burger button I am not able to click on it.我尝试通过多种方式实现它，但是我无法点击汉堡按钮。 I start to think maybe I need to like a jquery link or make sure of the node in my machine .我开始想也许我需要喜欢一个 jquery 链接或确保我机器中的节点。

This is the HTML :这是 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>

This is the CSS :这是 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') }) }

What do you think is the problem你认为是什么问题

Answer 1

change your js to click once, the menu show , double click and it hides将您的 js 更改为单击一次，菜单显示，双击并隐藏

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

you can check a detailed article about responsive hamburger menu in https://learnjsx.com/category/1/posts/responsive-css-import您可以在https://learnjsx.com/category/1/posts/responsive-css-import查看有关响应式汉堡菜单的详细文章

Answer 2

The DOMContentLoaded event has probably already fired before the listener is attached. DOMContentLoaded事件可能在附加侦听器之前已经触发。 If you don't want to use the onclick attribute, the best practice to check for document.readyState as in the example below.如果您不想使用onclick属性，最佳做法是检查document.readyState ，如下例所示。 Also, FYI you don't have a show class in your css, so the code below toggles, the class, but the class doesn't actually do anything.另外，仅供参考，您的 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>

Answer 3

 @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>

导航菜单到汉堡菜单

问题描述

3 个解决方案

解决方案1
0 2021-10-25 19:56:59

解决方案2
0 2021-10-25 20:16:19

解决方案3
0 2021-10-25 20:28:43

导航菜单到汉堡菜单

问题描述

3 个解决方案

解决方案1 0 2021-10-25 19:56:59

解决方案2 0 2021-10-25 20:16:19

解决方案3 0 2021-10-25 20:28:43

解决方案1
0 2021-10-25 19:56:59

解决方案2
0 2021-10-25 20:16:19

解决方案3
0 2021-10-25 20:28:43