导航菜单到汉堡菜单
[英]Navigation menu to Burger Menu
问题描述
我正在尝试使我的导航栏菜单响应。 我尝试通过多种方式实现它，但是我无法点击汉堡按钮。 我开始想也许我需要喜欢一个 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') }) }
你认为是什么问题
3 个解决方案
解决方案1
0 2021-10-25 19:56:59
将您的 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查看有关响应式汉堡菜单的详细文章
解决方案2
0 2021-10-25 20:16:19
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
0 2021-10-25 20:28:43
@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>
我的汉堡图标未显示导航菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.