新手开发响应式网站遇汉堡菜单问题:点击无法隐藏导航链接
响应式汉堡菜单问题求助
切换设备视图时,汉堡菜单无法隐藏导航链接,反而会使页面展开(详情见状态截图)。我是开发新手,正在练习制作响应式网站,布局不佳还请见谅。
相关代码
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <nav> <div class="logo"> <h4>Wew</h4> </div> <ul class="links"> <li><a href="">hehehh</a></li> <li><a href="">hehehh</a></li> <li><a href="">hehehh</a></li> <li><a href="">hehehh</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <script src="index.js"></script> </body> </html>
CSS代码
* { margin: 0; padding: 0; box-sizing: border-box; } html{ width: 100%; overflow-x: hidden; } nav { align-items: center; background-color: red; display: flex; padding: 0 5rem; justify-content: space-between; height: 90px; } nav ul { display: flex; gap: 40px; } nav li { list-style: none; } .burger div { width: 25px; height: 3px; margin: 4px; background-color: black; } .burger { display: none; } @media screen and (max-width: 940px) { body { overflow-x: hidden; } .burger { display: block; } .links { position: absolute; right: -100%; top: 5.6rem; height: 300px; width: 200px; flex-direction: column; background-color: red; transition: all 0.50s ease; } .links li { position: relative; left: 30px; width: 100px; top: 20px; } .burger { z-index: 1; } } .nav-active { right: 0%; }
JavaScript代码
const Navslide = () => { const burger = document.querySelector(".burger") const links = document.querySelector(".links") burger.addEventListener("click", () => { links.classList.toggle("nav-active") }) } Navslide()
内容的提问来源于stack exchange,提问作者ineedhelp
相关产品推荐
相关产品推荐

