javascript - 响应式导航栏 - 下拉符号在点击时移动

Question

我正在努力创建一个响应式导航栏，其中的下拉菜单取代了“主页、关于、服务等”。菜单选项。我要离开 this W3Schools example .

我的问题是 fa-caret 下拉图标显示在我的 Logo 旁边(在小于 750 像素的屏幕上)，但是当我单击该图标时，它会跳到页面。

我试过将下拉选项分成 div 并使用 flexbox 和 float 图标，但似乎没有任何效果。我需要在左侧显示公司 Logo ，并希望菜单固定在右侧。

body {
  margin: 0;
  background: rgb(17, 58, 93);
}

* {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  font-family: 'Lato', sans-serif;
}


/* Social Nav */

.social-nav {
  height: 25px;
  background: rgb(255, 231, 113);
  position: fixed;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.social-nav-text {
  font-size: 14px;
  color: rgb(17, 58, 93);
  font-family: 'Montserrat', sans-serif;
}

.social-nav-text a {
  text-decoration: none;
  color: rgb(17, 58, 93);
}

.social-nav-icon {
  height: 12px;
  margin: auto 5px;
}

.social-nav-social {
  margin: 0 auto 0 25px;
  display: none;
}

.social-nav-phone {
  margin: 0 25px 0 auto;
}


/* Main Nav */

.main-nav {
  overflow: hidden;
  position: fixed;
  z-index: 1;
}

.main-nav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

.main-nav-logo {
  height: 95px;
  margin-top: 35px;
}

.main-nav a:hover {
  color: rgb(255, 231, 113);
  font-weight: bold;
}

.main-nav a.active {
  color: rgb(17, 58, 93);
}

.main-nav .icon {
  display: none;
  margin-top: 90px;
}


/* Mobile Style */

@media only screen and (max-width: 400px) {
  .main-nav a:not(:first-child) {
    display: none;
  }
  .main-nav a.icon {
    float: right;
    display: block;
  }
  .main-nav.responsive {
    position: relative;
  }
  .main-nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .main-nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* Tablet Style */

@media only screen and (min-width: 401px) and (max-width: 750px) {
  .main-nav a:not(:first-child) {
    display: none;
  }
  .main-nav a.icon {
    float: right;
    display: block;
  }
  .main-nav.responsive {
    position: relative;
  }
  .main-nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .main-nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* Desktop Style */

@media only screen and (min-width: 751px) {
  /* Social Nav */
  .social-nav {
    height: 35px;
  }
  .social-nav-text {
    font-size: 16px;
  }
  .social-nav-icon {
    height: 14px;
  }
  .social-nav-social {
    display: flex;
  }
  /*Main Nav */
  .main-nav-logo {
    margin: 50px auto auto 25px;
  }
  .main-nav-page {
    margin-top: 100px;
  }
}

<div class="social-nav">
  <div class="social-nav-social">
    <p class="social-nav-text"><i>FOLLOW US! <a href="http://instagram.com/profeservice" target="_blank"> <img class="social-nav-icon" src="images/icons/instagram-icon.png" alt="Instagram" /> /profeservice</a> <a href="https://www.facebook.com/The-Service-Professional-110770558329" target="_blank"> <img class="social-nav-icon" src="images/icons/facebook-icon.png" alt="Facebook" /> /The-Service-Professional</a></i></p>
  </div>
  <div class="social-nav-phone">
    <p class="social-nav-text"><i>Call us now! <a href="tel:+18055241526"><img class="social-nav-icon" src="images/icons/telephone-icon.png" alt="Telephone" />(805) 524-1526</a></i></p>
  </div>
</div>

<div class="main-nav" id="main-navigation">
  <a href="" class="active"><img class="main-nav-logo" src="images/logo/Logo.svg" alt="Logo" /></a>
  <a href="" class="main-nav-page">Home</a>
  <a href="about.html" class="main-nav-page">About</a>
  <a href="services.html" class="main-nav-page">Services</a>
  <a href="products.html" class="main-nav-page">Products</a>
  <a href="contact.html" class="main-nav-page">Contact</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<script type="text/javascript">
  function myFunction() {
    var x = document.getElementById("main-navigation");
    if (x.className === "main-nav") {
      x.className += " responsive";
    } else {
      x.className = "main-nav";
    }
  }
</script>

我希望下拉图标保持固定在页面右侧，无论它是否处于事件状态。

Answer 1

造成这种情况的原因是 .main-nav 上的 position: fixed。使用它时，必须显式设置 width。

将 width: 100% 添加到 .main-nav ，它应该会按预期工作。