我正在嘗試創(chuàng)建一個(gè)導(dǎo)航欄，該導(dǎo)航欄 100% 向右平移，直到用戶單擊漢堡并將其移回到正常位置。當(dāng)我嘗試禁用 x-overflow 時(shí)遇到問題。用戶可以向右滾動(dòng)并看到灰色背景，因此我的總視圖寬度為 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 回答
呼喚遠(yuǎn)方
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊
@media screen and (max-width: 768px) {
.nav-links {
position: fixed;
}
}
- 1 回答
- 0 關(guān)注
- 108 瀏覽
添加回答
舉報(bào)
0/150
提交
取消