时间戳

首页 > 解决方案 > 响应式导航栏 - 单击时移动的下拉符号

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

问题描述

我正在创建一个响应式导航栏，其下拉菜单取代了“主页、关于、服务等”。菜单选项。我要离开这个 W3Schools 示例。

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

我尝试将下拉选项分成 div 并使用 flexbox 并浮动图标，但似乎没有任何效果。我需要将公司徽标放在左侧，并希望菜单保持固定在右侧。

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>

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

标签： javascripthtmlcss

解决方案

是什么原因导致position: fixed的.main-nav。使用时，必须显式设置width.

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

推荐阅读