我正在尝试创建一个导航栏，该导航栏 100% 向右平移，直到用户单击汉堡并将其移回到正常位置。当我尝试禁用 x-overflow 时遇到问题。用户可以向右滚动并看到灰色背景，因此我的总视图宽度为 200%。将提供我的代码。这是我的 HTML<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css" type="text/css"> <title>Home - Marco Chavez</title></head><body> <nav> <div class="logo"> <h4>Marco Chavez</h4> </div> <ul class="nav-links"> <li> <a href="index.html">Home</a> </li> <li> <a href="pages/about.html">About</a> </li> <li> <a href="./assets/ResumeMChavez2020-03.pdf" download>Resume</a> </li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <section> <main> <h1>I build <div id="powerful"> <span>Powerful</span> </div> web applications</h1> <a href="pages/schedule.html">Schedule a meeting</a> </main> </section> <script src="./js/script.js"></script></body></html>JavaScriptconst navSlide = () => { const burger = document.querySelector(".burger"); const nav = document.querySelector(".nav-links"); const navLinks = document.querySelectorAll(".nav-links li"); burger.addEventListener('click', () => { nav.classList.toggle('nav-active') navLinks.forEach((link, index) => { if(link.style.animation) { link.style.animation = "" } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + .4}s`; } }); burger.classList.toggle('toggle'); });}navSlide();
1 回答
- 1 回答
- 0 关注
- 53 浏览
添加回答
举报
0/150
提交
取消