[英]Toggle to display/hide menu, with flexbox and list items
编辑:感谢您的回答! 如果有人感兴趣,我已经更新了 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";
}
}
我觉得应该有一个简单的解决方案,但我还没有找到。 很感谢任何形式的帮助!
请使用语义元素和正确的方法来创建一个适用于所有设备的显示/隐藏导航栏。
请定位<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.