使用 flexbox 和列表項切換顯示/隱藏菜單

Question

編輯：感謝您的回答！ 如果有人感興趣，我已經更新了 codepen 以反映最終代碼。 帖子中的代碼是無法正常工作的原始代碼。

到目前為止，我已經完成了大約 15 個教程，但到目前為止，它們都沒有奏效。

這是挑戰：

我為桌面制作了一個導航欄，使用菜單項的無序列表，並使用 flexbox 組織它們。

在移動版本中，我希望通過按切換來隱藏/顯示菜單項。 我發現大多數教程都是通過在這些項目周圍放置一個 div 來做到這一點的，但這會弄亂 flexbox。

tldr; 如何通過按下切換按鈕使由 flexbox 中的列表項組成的導航欄顯示/消失？

這是我的代碼：

代碼筆

HTML

<html>
<body>
<header>
<nav>
    <ul>
        <li><!--Logo in nav-->
            <a href="index.html">
            <div class="logo" id="pageTop">
                <img src="img/logo.png" alt="Company logo">
            </div></a>
        </li>
        <li class="nav"><a href="projects.html">Prosjekter</a></li>
        <li class="nav"><a href="consultants.html">Konsulenter</a></li>
        <li class="nav"><a href="about.html">Om Sirius</a></li>
        <li class="nav"><a href="blog.html">Blogg</a></li>
        <li class="nav"><a href="contact.html">Kontakt</a></li>
        <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
 <i class="fa fa-bars"></i>
          </li>
    </ul>
</nav>
</header>
  
  </body>
</html>

CSS

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: white;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

header {
    background-color:#0f2530;
}

Nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
}

Nav li {
    color: white;
    font-size: 3.6vh;
    font-weight: bold;
    display: grid;
    align-items: end;
    text-align: center;
    padding: 3vh 0;
}

.nav-toggle {
  display: none;
}

li a:link, li a:visited {
    text-decoration: none;
    color: white;
}

li a:hover {
    opacity: 0.8;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

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

  .nav {
    display: none;
  }  
  
nav ul {
    display: block;
}

nav li {
    margin: 0 auto;
    text-align: center;
}
  
.nav-toggle {
  display: block;
}

我正在想象一個 JS 解決方案，就像 W3 在這里建議的一個稍微改變的解決方案，但是使用類而不是 ID 來定位所有列表項。 但是，這不起作用：

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

我覺得應該有一個簡單的解決方案，但我還沒有找到。 很感謝任何形式的幫助！

Answer 1

請使用語義元素和正確的方法來創建一個適用於所有設備的顯示/隱藏導航欄。

請定位<nav>元素而不是<li>

更新的片段：-

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mika's Portfolio</title> <link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <style> html, body { margin: 0; padding: 0; box-sizing: border-box; background-color: white; font-family: 'Lato', sans-serif; font-size: 18px; } header { background-color:#0f2530; min-height: 40px; } Nav ul { display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 0; } Nav li { color: white; font-size: 3.6vh; font-weight: bold; display: grid; align-items: end; text-align: center; padding: 3vh 0; } .nav-toggle { display: none; } li a:link, li a:visited { text-decoration: none; color: white; } li a:hover { opacity: 0.8; -webkit-transition: 0.2s; transition: 0.2s; } .bar { background: #fff; margin: 0; position: absolute; right: 48px; top: 6px; padding: 3px 10px; display:none } @media only screen and (max-width: 550px) { #nav { display:none; } .bar { display:block; } nav ul { display: block; } nav li { margin: 0 auto; text-align: center; } .nav-toggle { display: block; } </style> <body> <header> <a href="index.html"> <div class="logo" id="pageTop"> <img src="img/logo.png" alt="Company logo"> </div> </a> <a class="bar" href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i></a> <nav id="nav"> <ul> <li class="nav"><a href="projects.html">Prosjekter</a></li> <li class="nav"><a href="consultants.html">Konsulenter</a></li> <li class="nav"><a href="about.html">Om Sirius</a></li> <li class="nav"><a href="blog.html">Blogg</a></li> <li class="nav"><a href="contact.html">Kontakt</a></li> </ul> </nav> </header> <script> function myFunction() { var x = document.getElementById("nav"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> </body> </html>

使用 flexbox 和列表項切換顯示/隱藏菜單

問題描述

1 個解決方案

解決方案1
0 已采納 2020-09-25 11:46:30

使用 flexbox 和列表項切換顯示/隱藏菜單

問題描述

1 個解決方案

解決方案1 0 已采納 2020-09-25 11:46:30

解決方案1
0 已采納 2020-09-25 11:46:30