如何从响应式导航栏使我的导航栏静态化？
[英]How can I make my navbar static from a responsive navbar?
问题描述
I am making a responsive navigation bar.
我正在制作一个响应式导航栏。 I have made it so that global style is a toggled navigation bar and at 600px this gets reduced from 100% to 30%, but now I want it so that when it reached 1000px it becomes a static navbar without the "menu" and "menu1".我已经做到了，全局样式是一个切换导航栏，在 600 像素时，它从 100% 减少到 30%，但现在我想要它，以便当它达到 1000 像素时，它变成一个没有“菜单”和“菜单1”的静态导航栏”。 A little stuck with trying to get a static navbar after 1000px.尝试在 1000 像素后获得静态导航栏有点卡住了。 Just seems to disappear but not sure how to make it static from a toggled navbar.只是似乎消失了，但不知道如何从切换的导航栏中使其变为静态。
Where am I going wrong?我哪里错了？
code:代码：
function toggleNav() { document.getElementById("sideNav").classList.toggle('open'); } closeNav.addEventListener('click', toggleNav); openNav.addEventListener('click', toggleNav);
body { background-color: white; font-family: sans-serif; margin: 0; } h1 { color: lightpink; font-size: 40px; text-align: center; padding: 30px; } nav { display: flex; flex-direction: column; align-items: stretch; text-align: center; height: 100%; width: 100%; top: 0; /* Stay at the top */ left: -100%; position: fixed; z-index: 1; /* Stay on top */ background-color: white; overflow-x: hidden; transition: 2s; opacity: 0.5; padding: 2px; } nav .menu, .menu1 { text-align: right; } nav.open { left: 0; cursor: pointer; font-size: 40px; align-content: right; opacity: 1; } nav a, .menu, .menu1 { padding: 0.25em 0.5em; text-decoration: none; font-size: 25px; color: pink; display: block; transition: 2s; } .menu { top: 0; } a { transition: 2s ease ; padding: 2px; } main { width: 85% padding: 0px 30px; } /* Tablet nav bar */ @media only screen and (min-width: 600px) { nav { width: 30%; } } @media only screen and (min-width: 1000px) { body { margin: 1em auto; } nav { display: flex; flex-direction: row; justify-content: space-evenly; align-items: stretch; height: 5%; width: 100%; } a:hover { background-color: blanchedalmond; } .menu1, .menu { display: none; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cake Shop</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <span class="menu" id="openNav">☰</span> <nav id="sideNav"> <span class="menu1" id="closeNav">×</span> <a href="index.html">Home</a> <a href="recipes.html">Recipes</a> <a href="ingredients.html">Ingredients</a> <a href="about.html">About</a> </nav> <h1 id="something">Cakes 'n' Bakes</h1> </header> <main> <script src="js/scripts.js"></script> <script src="js/index.js"></script> </main> </body> </html>
1 个解决方案
解决方案1
0 2020-03-07 16:13:25
May be you should have transition: left 2s;可能你应该有transition: left 2s; in nav field, if i undestood you correctly在nav领域，如果我正确理解你
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.