导航菜单到汉堡菜单

Posted

技术标签:

【中文标题】导航菜单到汉堡菜单【英文标题】：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')
        )

你认为是什么问题

【问题讨论】：

【参考方案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

【讨论】：

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

以上是关于导航菜单到汉堡菜单的主要内容，如果未能解决你的问题，请参考以下文章

在 Android 中创建带有导航抽屉的汉堡菜单

点击事件后关闭汉堡菜单

结合汉堡菜单和导航页面，Xamarin.Forms

在 UWP 中单击汉堡菜单项时如何提高应用程序性能？

使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox，但不适用于 Safari

何时使用汉堡包菜单设计