漢堡圖標左對齊的響應式菜單
[英]Responsive menu with hamburger icon aligned to the left
問題描述
我有一個響應式菜單，在大屏幕上您會看到位於頁面中心的下拉菜單。 但是在小屏幕上，您會看到一個漢堡菜單也位於頁面中心，我希望在左側看到該圖標。 我怎樣才能做到這一點？ 它看起來像這樣： https://postimg.cc/dLFkHH1Z在大屏幕上沒有問題，但在小屏幕上我想看到左邊的漢堡包圖標。 提前致謝。
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }
/* Add a black background color to the top navigation */.topnav { background-color: white; overflow: hidden; display:flex; justify-content: center; } /* Style the links inside the navigation bar */.topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Add an active class to highlight the current page */.active { background-color: #4CAF50; color: white; } /* Hide the link that should open and close the topnav on small screens */.topnav.icon { display: none; } /* Dropdown container - needed to position the dropdown content */.dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */.dropdown.dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* Style the dropdown content (hidden by default) */.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Style the links inside the dropdown */.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a dark background on topnav links and the dropdown button on hover */.topnav a:hover, .dropdown:hover.dropbtn { background-color: #555; color: white; } /* Add a grey background to dropdown links on hover */.dropdown-content a:hover { background-color: #ddd; color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */.dropdown:hover.dropdown-content { display: block; } /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 600px) {.topnav a, .dropdown.dropbtn { display: none; }.topnav a.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 600px) {.topnav.responsive {position: relative;}.topnav.responsive a.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; }.topnav.responsive.dropdown {float: none;}.topnav.responsive.dropdown-content {position: relative;}.topnav.responsive.dropdown.dropbtn { display: block; width: 100%; text-align: left; } } <html> <head> <title>Menú Desplegable Responsive</title> <LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css"> <script src="menu.js" type="text/javascript"></script> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2020-12-21 17:31:31
我找到了解決方案。
document.getElementById("menuBars").onclick = function(e) { e.preventDefault(); var x = document.getElementById("myTopnav"); x.classList.toggle("responsive"); }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; }.topnav { overflow: hidden; background-color: white; text-align: center; } /*.topnav.fl { float: left; }.topnav.fr { float: right; } */.topnav.main { display: inline-block; }.topnav.main a { float: left; }.topnav a { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { background-color: #ddd; color: black; }.topnav a.active { background-color: #4CAF50; color: white; }.topnav.icon { display: none; } main { padding-left: 16px; } @media screen and (max-width: 600px) {.topnav a, .dropdown.dropbtn { display: none; }.topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) {.topnav.responsive { position: relative; }.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; } }
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Menú</title> <LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css"> <script src="menu.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <nav class="topnav" id="myTopnav"> <a href="#home">Home</a> <a href="#about" >About</a> <a href="#news">News</a> <a href="#contact">Contact</a> <:--<a href="" class="icon" id="menuBars">--> <a href="javascript;void(0);" id="menuBars" class="icon" onclick="myFunction()">☰</a> <i class="fa fa-bars"></i> </a> </nav> </body> </html>
（漢堡包圖標）響應式菜單上帶有toggleClass功能的.reveal類未正確定位？
[英](hamburger icon) .reveal class on responsive menu with a toggleClass function is not positioning properly?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.