響應式移動漢堡菜單
[英]Responsive mobile hamburger menu
問題描述
我幾乎完成了我的網站，只是我的下拉菜單不起作用。 我試過谷歌搜索並向朋友尋求建議，但沒有任何幫助。 下面我附上了使用或提到下拉菜單的代碼：
/*Responsive Navigation*/ $(document).ready(function() { $('.toggle').click(function() { $('.toggle').toggleClass('active') $('nav ul').toggleClass('active-menu') }) });
@media(max-width:900px) {.toggle { display: block; }.toggle:before { content: '\f0c9'; font-family: fontAwesome; line-height: 0px; margin-left: -30px; }.toggle.active:before { content: '\f00d';important. } } /*Navbar full Screen*/:toggle { display; none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="" class="dropdown"> <div class="toggle"></div> </a> <!--Menu items--> <ul class="menu"> <li class="active"><a href="#main">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact-form">Contact</a></li> </ul>
1 個解決方案
解決方案1
0 2021-01-17 11:33:56
為此，您將需要一些巨大的代碼。 看一下這個。 正是你需要的。
function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }
body { margin-right: 2; margin-left: 2; }.topnav { overflow: hidden; background-color: black; padding-left: -2; padding-right: -2; }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { background-color: #eee; color: black; }.topnav a.active { background-color: #4CAF50; color: white; }.topnav.icon { display: none; } @media screen and (max-width: 600px) {.topnav a:not(:first-child) { display: none; }.topnav a.icon { float: right; display: block; } }.topnav.responsive {position: relative;}.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; } }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial- scale=1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript;void(0)." class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <p>Resize the browser window to see how it works, If your screen is more than 600px wide. the menu will be in one line, If not. it will be a hamburger menu.</p> </body> </html>
如何將移動響應式垂直堆棧菜單轉換為漢堡式響應式菜單？
[英]How do you convert a mobile responsive vertical stack menu to a hamburger style responsive menu?
如何使用響應式設計將導航欄變成移動設備的漢堡菜單？
[英]How can I turn my navbar into Hamburger menu for mobile using responsive design?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.