如何使導航欄菜單具有移動響應性？

Question

我有一些家庭作業問題，因此我需要為一個學校項目制作一個網站，並且菜單導航欄不支持移動設備，並且不確定如何解決它。 有人可以幫忙嗎？ 我正在使用Bootstrap 3，這是我的代碼。

 $(document).ready({ $('.dropdown-toggle').dropdown() }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="main" id="section1"> <div class="collapse navbar-collapse" id="myNavbar" > <ul class="nav navbar-nav"> <li><a href="index.html">Home</a></li> <li class="dropdown"> <a href="Comics.html" data-toggle="dropdown" class="dropdown-toggle">Marvel<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#sp">Spiderman</a></li> <li><a href="#im">Iron man</a></li> <li><a href="#am">Captain America</a></li> </ul> <li class="dropdown"> <a href="Comics.html" data-toggle="dropdown" class="dropdown-toggle">DC<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#flash">The Flash</a></li> <li><a href="#aq">Aquaman</a></li> </ul> <li class="dropdown"> <a href="Comics.html" data-toggle="dropdown" class="dropdown-toggle">Books<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="HarryPotter.html">Harry Potter</a></li> <li><a href="OneShot.html">One shot</a></li> <li><a href="MrMercedes.html">Mr.Mercedes</a></li> </ul> </li> <li class="dropdown"> <a href="" data-toggle="dropdown" class="dropdown-toggle">More<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="Education.html">Education</a></li> <li><a href="Comics.html">Comics</a></li> </ul></li> <li><a href="#com">Interesting Comics</a></li> </div></div> </ul></div></nav> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

Answer 1

創建一個移動導航菜單

1. 步驟1）添加HTML：

例

 <!-- Load an icon library to show a hamburger menu (bars) on small screens --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Top Navigation Menu --> <div class="topnav"> <a href="#home" class="active">Logo</a> <!-- Navigation links (hidden by default) --> <div id="myLinks"> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links --> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> 

2. 步驟2）添加CSS：

例

 /* Style the navigation menu */ .topnav { overflow: hidden; background-color: #333; position: relative; } /* Hide the links inside the navigation menu (except for logo/home) */ .topnav #myLinks { display: none; } /* Style navigation menu links */ .topnav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; } /* Style the hamburger menu */ .topnav a.icon { background: black; display: block; position: absolute; right: 0; top: 0; } /* Add a grey background color on mouse-over */ .topnav a:hover { background-color: #ddd; color: black; } /* Style the active link (or home/logo) */ .active { background-color: #4CAF50; color: white; } 

3. 步驟3）添加JavaScript：

例

 /* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */ function myFunction() { var x = document.getElementById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } 

https://www.w3schools.com/howto/howto_js_mobile_navbar.asp