javascript - 修复响应式导航栏(非 Bootstrap )

Question

注意:导航栏不在 Bootstrap 中

我已将此导航栏设为响应式，如您在下面的代码中所见，但问题是当屏幕小于 950 像素时，它会显示按钮，该按钮应该打开一个菜单，按钮一个接一个地放在另一个下面，这样它就可以适合屏幕，但是当我点击它时它什么也没做。我缺少代码还是什么？任何帮助将不胜感激。

* {
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;
}

Javascript

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