[我的导航栏当前在我检查并放入iPhone x等移动设备时显示为:https://gyazo.com/7d0b28abdc172c13208d64b1cdde2559
但是,我希望它在移动设备中显示为:https://gyazo.com/5f67b6888177c20b2e087838f29470b0并使其打开,就像单击按钮时一样。
要使它看起来像我希望我在CSS中不显示任何内容,但这意味着当您单击按钮以显示它时,我的HTML和CSS如下所示[]
CSS:
@media screen and (max-width:640px){ body{ overflow-x: hidden; } .nav-links{ position: absolute; right: 0px; height: 92vh; top: 8vh; background-color: #5d4954; display: flex; flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); display: none; } .nav-links li{ opacity: 0; } .burger{ display: block; } } .nav-active{ transform: translateX(0%); transition: transform 0.5s ease-in; }
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="author" content="Lewis Haddon"> <title>Business website</title> <link rel="stylesheet" href="./css/test2.css" type="text/css"> </head> <body> <nav> <div class="logo"> <h4>The Nav</h4> </div> <ul class="nav-links"> <li><a href="">Home</a></li> <li><a href="">S3</a></li> <li><a href="">RS6</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <script src="app.js"></script> </body> </html>
Java:
const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); const navLinks = document.querySelectorAll('.nav-links li'); //Toggles the nav bar burger.addEventListener('click', () => { nav.classList.toggle('nav-active'); //animates the links navLinks.forEach((link, index) => { if (link.getElementsByClassName.animation) { link.style.animation = ``; } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index /7 + 0.5}s`; } }); //burger animation burger.classList.toggle('toggle'); }); } navSlide();
[请提供任何帮助:)
[我的导航栏当前在我检查并将其放置在iPhone x等移动设备上时看起来像这样:https://gyazo.com/7d0b28abdc172c13208d64b1cdde2559,但是,我希望它在...时显得像这样...
使用visibility: hidden;
作为CSS。
在CSS中添加此代码,您可以将移动视图的像素从320更改为350或300]]
@media(max-width: 320px) {
nav{
display: none;
}
}
将其用于右侧的切换器: