响应式Navbar下拉菜单（非Bootstrap）

时间：2019-01-15 08:14:09

标签： javascript html css

我有这个导航栏，它在原始模式下可以完美运行，并且当屏幕的宽度小于950px时，它会一个接一个地显示按钮，但是问题是，下拉按钮也在那里，没关系，但是在完全错误的位置打开下拉菜单内容。我希望使下拉内容显示在下拉按钮下方。我的代码有问题吗？任何帮助将不胜感激。我的代码：

$(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;
}

.thum {
  background-color: gray;
}

nav ul li a.coinsnumber:hover {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

#attr_nav .dropdown-contentd {
  position: relative;
}

#dropdownd .dropdown-contentd {
  /* display: none;*/
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  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;*/
}

#dropdownd:hover .dropdown-contentd {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
  /*  padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;*/
}

.a-padding {
  padding-left: 10px;
  padding-right: 10px;
}


/*nav ul li .dropdownd:hover .dropdown-contentd {
  max-height: 500px;
    transition: max-height 0.25s ease-in;
}*/

.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: royalblue;
  text-align: center;
  list-style: none;
  display: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

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 {
  color: #444;
  cursor: pointer
}

#attr_nav:hover {
  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 (max-width:370px) {
  nav ul>li:first-child {
    display: none;
  }
}

@media screen and (max-width:270px) {
  nav ul>li:last-of-type {
    display: none;
  }
}

@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;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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 id="dropdownd">
        <a href="#" class="dropbtnd">More</a>
        <i class="fa fa-caret-down"></i>
        <div class="dropdown-contentd">
          <a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
          <a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
          <a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
          <a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
          <a class="dropdowncontentn a-padding" 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" class="coinsnumber">
        <?php include 'navbar_coins.php'; ?>
      </a>
    </li>
  </ul>
</nav>

2 个答案:

答案 0 :(得分：2)

添加相对于nav ul li的位置：并将此CSS设置为下拉列表

.dropdown-contentd{
  width:100%;
} 

.dropdown-contentd a{
  text-align:center;
}


$(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{
  position:relative
}

.thum {
  background-color: gray;
}

nav ul li a.coinsnumber:hover {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

#attr_nav .dropdown-contentd {
  position: relative;
}

#dropdownd .dropdown-contentd {
  /* display: none;*/
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  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;*/
}

#dropdownd:hover .dropdown-contentd {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
  /*  padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;*/
}

.a-padding {
  padding-left: 10px;
  padding-right: 10px;
}


/*nav ul li .dropdownd:hover .dropdown-contentd {
  max-height: 500px;
    transition: max-height 0.25s ease-in;
}*/

.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: royalblue;
  text-align: center;
  list-style: none;
  display: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav ul>ol>li{
  width: 100vw;
  color: #FFF;
  margin: 0;
  padding: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all .3s ease;
}

.dropdown-contentd{
  width:100%;
} 

.dropdown-contentd a{
  text-align:center;
}

nav ul>ol>li:hover a {
  margin: 20px;
}

nav ul>ol>li:hover {
  color: #444;
  cursor: pointer
}

#attr_nav:hover {
  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 (max-width:370px) {
  nav ul>li:first-child {
    display: none;
  }
}

@media screen and (max-width:270px) {
  nav ul>li:last-of-type {
    display: none;
  }
}

@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;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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 id="dropdownd">
        <a href="#" class="dropbtnd">More</a>
        <i class="fa fa-caret-down"></i>
        <div class="dropdown-contentd">
          <a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
          <a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
          <a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
          <a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
          <a class="dropdowncontentn a-padding" 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" class="coinsnumber">
        <?php include 'navbar_coins.php'; ?>
      </a>
    </li>
  </ul>
</nav>

答案 1 :(得分：1)

将@echo off cls python "C:\Users\User\Desktop\Difference of Two Files.py" %1 添加到父元素import sys import os f1 = open(sys.argv[1], 'r') f1_name = str(os.path.basename(f1.name)).rsplit('.')[0] f2_path = input('Enter the path of file to compare: ') f2 = open(f2_path, 'r') f2_name = str(os.path.basename(f2.name)).rsplit('.')[0] f3 = open(f'{f1_name} - {f2_name} diff.txt', 'w') file1 = set(f1.read().splitlines()) file2 = set(f2.read().splitlines()) difference = file1.difference(file2) for i in difference: f3.write(i + '\n') f1.close() f2.close() f3.close() 。然后将position:relative和#dropdownd样式设置为子元素position:absolute 

top:value
.dropdown-contentd
$(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);

  });
});

相关问题
最新问题