使用 flexbox 和列表项切换显示/隐藏菜单

Question

EDIT: Thanks for answering!编辑：感谢您的回答！ I've updated the codepen to reflect the final code, if anyone is interested.如果有人感兴趣，我已经更新了 codepen 以反映最终代码。 The code in the post is the original code that wasn't working.帖子中的代码是无法正常工作的原始代码。

I've been through probably 15 tutorials by now, but so far none of them are working.到目前为止，我已经完成了大约 15 个教程，但到目前为止，它们都没有奏效。

Here's the challenge:这是挑战：

I've made a navbar for desktop, using an unordered list for the menu items, and organizing them with flexbox.我为桌面制作了一个导航栏，使用菜单项的无序列表，并使用 flexbox 组织它们。

In the mobile version, I'd like the menu items to hide/appear by pressing a toggle.在移动版本中，我希望通过按切换来隐藏/显示菜单项。 I've found that most tutorials does this by throwing a div around these items, but that would mess up the flexbox.我发现大多数教程都是通过在这些项目周围放置一个 div 来做到这一点的，但这会弄乱 flexbox。

tldr; tldr; How can I make a navbar, made up of list items in a flexbox, to appear/disappear by pressing a toggle?如何通过按下切换按钮使由 flexbox 中的列表项组成的导航栏显示/消失？

Here is my code:这是我的代码：

Codepen代码笔

HTML 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 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;
}

I was imagining a JS solution, like a slightly altered one of what W3 suggests here , but using class instead of ID to target all list items.我正在想象一个 JS 解决方案，就像 W3 在这里建议的一个稍微改变的解决方案，但是使用类而不是 ID 来定位所有列表项。 However, that doesn't work:但是，这不起作用：

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

I feel like there should be a simple solution, but I haven't found it yet.我觉得应该有一个简单的解决方案，但我还没有找到。 Any help is very much appreciated!很感谢任何形式的帮助！

Answer 1

Please use Semantic Elements and right approach to To create a show/hide navigation bar, that works on all devices.请使用语义元素和正确的方法来创建一个适用于所有设备的显示/隐藏导航栏。

Please target <nav> element instead of <li>请定位<nav>元素而不是<li>

Updated snippet :-更新的片段：-

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