修复响应式导航栏（不引导）

Question

注意：导航栏不在引导程序中

正如您在下面的代码中所看到的那样，我已经使此导航栏响应，但是问题是，当屏幕短于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>