[英]How to make a responsive navigation bar with menu icon
我正在嘗試使用響應式樣式制作響應式導航欄，如果屏幕尺寸小於 750px，則導航欄中將出現中間的菜單圖標，懸停時它將顯示列表中的選項，下面是我的代碼，並且可能我重疊了 css 樣式。
.topnav { position: relative; overflow: hidden; background-color: #a2d4c3; margin: 3px 50px 3px 50px; border: 1px solid black; border-radius: 5px; } .topnav a { float: left; text-align: center; padding: 14px 16px; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } @media screen and (max-width: 760px) { .topnav a { float: none; display: block; } } ul { list-style-type: none; margin: 0; padding: 0; } .hidden:hover a { background-color: #dab756; display: block; } .hidden:hover ul a:hover { color: #fff; } .hidden li ul { display: none; } .hidden li { display: block; float: none; } .hidden ul li a { width: auto; min-width: auto; display: block; } .hidden .hidden:hover li a { display: block; } @media screen and (max-width: 750px) { .hidden ul { position: static; display: none; } .hidden li a { width: 100%; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link </head> <body> <header id="header"> <div class="topnav"> <ul class="hidden"> <li><a href="#">Menu</a></li> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> </ul> </div> </header> </body> </html>
您需要根據如下所示的條件使用 javascript 更改導航的類，然后相應地設置更改后的類的樣式。
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
現在我認為這個片段和你想要的一樣......
body { font-family: sans-serif; } * { box-sizing: border-box; } header { background: #181818; height: 200px; padding-top: 40px; } .inner { max-width: 1000px; margin: 0 auto; padding: 0px 20px; position: relative; } .logo { text-decoration: none; color: #777; font-weight: 800; font-size: 30px; line-height: 40px; } h1 { text-align: center; width: 100%; margin-top: 120px; color: #eee; font-weight: 800; font-size: 40px; } nav > ul { float: left; } nav > ul > li { text-align: center; line-height: 40px; margin-left: 70px; } nav > ul li ul li { width: 100%; text-align: left; } nav ul li:hover { cursor: pointer; position: relative; } nav ul li:hover > ul { display: block; } nav ul li:hover > a { color: #777; } nav > ul > li > a { cursor: pointer; display: block; outline: none; width: 100%; text-decoration: none; } nav > ul > li { float: left; } nav a { color: white; } nav > ul li ul { display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 2000; } nav > ul li ul li > a { text-decoration: none; } [type="checkbox"], label { display: none; } @media screen and (max-width: 750px) { nav ul { display: none; } label { display: block; background: #222; width: 40px; height: 40px; cursor: pointer; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } label:after { content: ''; display: block; width: 30px; height: 5px; background: #777; margin: 7px 5px; box-shadow: 0px 10px 0px #777, 0px 20px 0px #777 } [type="checkbox"]:checked ~ ul { display: block; z-index: 9999; position: absolute; right: 20px; left: 20px; } nav a { color: #777; } nav ul li { display: block; float: none; width: 100%; text-align: left; background: #222; text-indent: 20px; } nav > ul > li { margin-left: 0px; } nav > ul li ul li { display: block; float: none; } nav > ul li ul { display: block; position: relative; width: 100%; z-index: 9999; float: none; } h1 { font-size: 26px; } }
<header> <div class="inner"> <nav> <input type="checkbox" id="nav" /><label for="nav"></label> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> </ul> </nav> </div> </header>
如何將響應式導航欄上的菜單圖標動畫化為 x 圖標？
[英]How do I make a menu icon on a responsive navigation bar animated into an x icon?
如何在不使用任何框架的情況下為導航菜單創建響應式的“漢堡圖標”？
[英]How to make a responsive “Burger Icon” for navigation menu without using any framework?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.