修復響應式導航欄（非引導程序）

Question

注意：NAVBAR 不在引導程序中

正如您在下面的代碼中看到的那樣，我已經使這個 Navbar 具有響應性，但問題是當屏幕短於 950px 時，它會顯示應該打開一個菜單的按鈕屏幕，但當我點擊它時它什么也不做。 我錯過了代碼還是什么？ 任何幫助將不勝感激。

 * { box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav ul li a { color: #FFF; text-decoration: none; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px; font-family: Ubuntu; } nav ul li a:hover { text-decoration: none; color: #444; } nav ul li a.coinsnumber:hover { text-decoration: none; color: white; } .dropdown-contentd { display: none; position: absolute; top: 49px; background-color: royalblue; color: #FFF; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); z-index: 1; /*border: 1px solid black;*/ margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } .dropdown-contentd a { float: none; color: black; padding: 12px 16px; color: #ffffff; text-decoration: none; display: block; text-align: left; transition: all .3s ease; background-color: royalblue; } .dropdown-contentd a:hover { color: #444; } .dropdownd:hover .dropdown-contentd { display: block; } /* End General */ /* Start Navbar */ nav ul { background-color: royalblue; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } nav ul > li { padding-left: 20px; padding-right: 20px; padding: 15px; display: inline-block; transition: all .3s ease; margin-left: -5px } nav ul > ol { position: absolute; top: 49px; right: 0; background: #333; text-align: center; list-style: none; display: none } nav ul > ol > li { width: 100vw; color: #FFF; margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } nav ul > ol > li:hover a { margin: 20px; } nav ul > ol > li:hover { background: #000; cursor: pointer } nav ul input { opacity: .7; padding: 5px; float: right; display: none } /* Start Menue Right */ /* Start Media Query */ @media screen and (max-width:950px){ nav ul > li:not(:first-child) { display:none; } nav ul > li:nth-last-of-type(2) { display: inline-block; } nav ul > li:last-of-type { display: inline-block; } } @media screen and (min-width:950px) { nav ul > ol > li { display:none } nav ul > li:nth-last-of-type(2) { display: none } } .dropdowncontentn { background-color: royalblue; } nav { z-index: 1; position: fixed; right: 0; left: 0; top: 0; }

 <nav> <ul> <li><a href="home.php">Home</a></li> <li><a href="earnpoints.php">Earn Coins</a></li> <li><a href="getrewards.php">Get Rewards</a></li> <li><a href="referrals.php">Referrals</a></li> <li><a href="vouchers.php">Vouchers</a></li> <li><div class="dropdownd"> <a href="#" class="dropbtnd">More</a> <i class="fa fa-caret-down"></i> <div class="dropdown-contentd"> <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a> <a class="dropdowncontentn" href="partnerships.php">Partnerships</a> <a class="dropdowncontentn" href="contact.php">Contact us</a> <a class="dropdowncontentn" href="socialmedia.php">Social Media</a> <a class="dropdowncontentn" href="settings.php">Settings</a> </div> </div> </li> <li> <a href="#"> <i class="fa fa-bars"></i> </a> </li> <li class="thum" style="float:right;margin-right:25px;"> <a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a> </li> </ul> </nav>

Answer 1

您必須了解，為了在不加載新頁面的情況下使您的網站具有交互性，您需要在代碼中添加一些 javascript。 像這樣的事情可以工作：

HTML

<button onclick="showMobileMenu()">Show menu</button>

<div id="mobile-menu" class="mobile-menu">
  Your mobile menu here...
</div>

CSS

.mobile-menu{
  display:none;
}
.mobile-menu.show {
  display: block;
}

腳本

function showMobileMenu() {
  var element = document.getElementById("mobile-menu");
  element.classList.add("show");
}

Answer 2

除非您有一些 js，否則您沒有發布將列表項添加到按鈕的位置，否則您正在談論的按鈕沒有功能。

<li>
   <a href="#">
     <i class="fa fa-bars"></i>
   </a>
 </li>

這是您正在談論的按鈕，它只是一個帶有圖標的空鏈接。

您應該添加如下下拉選項：

<li><div class="dropdownd">
 <a href="#" class="dropbtnd">
     <i class="fa fa-bars"></i>
   </a>
 <div class="dropdown-contentd">
   <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
   <a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
   <a class="dropdowncontentn" href="contact.php">Contact us</a>
   <a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
   <a class="dropdowncontentn" href="settings.php">Settings</a>
 </div>
</div> 
</li>

這將是完整的 html：

<nav>
 <ul>
 <li><a href="home.php">Home</a></li>
 <li><a href="earnpoints.php">Earn Coins</a></li>
 <li><a href="getrewards.php">Get Rewards</a></li>
 <li><a href="referrals.php">Referrals</a></li>
 <li><a href="vouchers.php">Vouchers</a></li>
 <li><div class="dropdownd">
 <a href="#" class="dropbtnd">More</a>
   <i class="fa fa-caret-down"></i>
 <div class="dropdown-contentd">
   <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
   <a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
   <a class="dropdowncontentn" href="contact.php">Contact us</a>
   <a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
   <a class="dropdowncontentn" href="settings.php">Settings</a>
 </div>
</div> </li>
<li><div class="dropdownd">
 <a href="#" class="dropbtnd">
     <i class="fa fa-bars"></i>
   </a>
 <div class="dropdown-contentd">
   <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
   <a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
   <a class="dropdowncontentn" href="contact.php">Contact us</a>
   <a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
   <a class="dropdowncontentn" href="settings.php">Settings</a>
 </div>
</div> 
</li>

 <li class="thum" style="float:right;margin-right:25px;">
   <a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a>
 </li>
</ul>
</nav>

如果這對您有用，請將其標記為已接受的解決方案。

Answer 3

對 li > a 使用點擊功能，它現在可以工作了...

<li>
   <a id="attr_nav">
     <i class="fa fa-bars"></i>
   </a>
 </li>

 $(function() { var ulLi = $('nav ul > li'); var fa = $('nav ul > li:last-of-type a .fa'); $('nav ul').append('<ol></ol>'); $('nav').each(function() { for (var i=0; i <= ulLi.length - 3; i++) { $('nav ul > ol').append("<li>"+ i +"</li>"); $('nav ul > ol > li').eq(i).html(ulLi.eq(i+1).html()); } }); $('#attr_nav').click(function(){ $('nav ul > li:last-of-type').parent().children('ol').slideToggle(500); }); });

 * { box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav ul li a { color: #FFF; text-decoration: none; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px; font-family: Ubuntu; } nav ul li a:hover { text-decoration: none; color: #444; } nav ul li a.coinsnumber:hover { text-decoration: none; color: white; } .dropdown-contentd { display: none; position: absolute; top: 49px; background-color: royalblue; color: #FFF; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); z-index: 1; /*border: 1px solid black;*/ margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } .dropdown-contentd a { float: none; color: black; padding: 12px 16px; color: #ffffff; text-decoration: none; display: block; text-align: left; transition: all .3s ease; background-color: royalblue; } .dropdown-contentd a:hover { color: #444; } .dropdownd:hover .dropdown-contentd { display: block; } /* End General */ /* Start Navbar */ nav ul { background-color: royalblue; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } nav ul > li { padding-left: 20px; padding-right: 20px; padding: 15px; display: inline-block; transition: all .3s ease; margin-left: -5px } nav ul > ol { position: absolute; top: 49px; right: 0; background: #333; text-align: center; list-style: none; display: none } nav ul > ol > li { width: 100vw; color: #FFF; margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } nav ul > ol > li:hover a { margin: 20px; } nav ul > ol > li:hover { background: #000; cursor: pointer } nav ul input { opacity: .7; padding: 5px; float: right; display: none } /* Start Menue Right */ /* Start Media Query */ @media screen and (max-width:950px){ nav ul > li:not(:first-child) { display:none; } nav ul > li:nth-last-of-type(2) { display: inline-block; } nav ul > li:last-of-type { display: inline-block; } .dropdown-contentd {position: relative;} } @media screen and (min-width:950px) { nav ul > ol > li { display:none } nav ul > li:nth-last-of-type(2) { display: none } } .dropdowncontentn { background-color: royalblue; } nav { z-index: 1; position: fixed; right: 0; left: 0; top: 0; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <nav> <ul> <li><a href="home.php">Home</a></li> <li><a href="earnpoints.php">Earn Coins</a></li> <li><a href="getrewards.php">Get Rewards</a></li> <li><a href="referrals.php">Referrals</a></li> <li><a href="vouchers.php">Vouchers</a></li> <li><div class="dropdownd"> <a href="#" class="dropbtnd">More</a> <i class="fa fa-caret-down"></i> <div class="dropdown-contentd"> <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a> <a class="dropdowncontentn" href="partnerships.php">Partnerships</a> <a class="dropdowncontentn" href="contact.php">Contact us</a> <a class="dropdowncontentn" href="socialmedia.php">Social Media</a> <a class="dropdowncontentn" href="settings.php">Settings</a> </div> </div> </li> <li> <a id="attr_nav"> <i class="fa fa-bars"></i> </a> </li> <li class="thum" style="float:right;margin-right:25px;"> <a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a> </li> </ul> </nav>