移动响应式菜单放置

编程问答 2022-05-28

问题描述

我是一个新手/爱好者，我正在努力为我创建的网站的移动版本创建一个可折叠的菜单系统。我在右侧有社交媒体图标和链接，还有用于展开右侧菜单的单击按钮。 我希望所有菜单项都出现在此栏下方，但它一直在社交标签旁边的顶部栏中放置一个。此外，我可能想在每个单独的下拉链接周围放置一个边框，但是也有问题。

function myFunction() {
    var x = document.getElementById("myTopNav");
    if (x.className === "nav") {
      x.className += " responsive";
    } else {
      x.className = "nav";
    }
  }
.nav {
  border: 1px;
  text-align: center;
  list-style: none;
  overflow: hidden;
  text-align: right;
  font-weight: bold; 
  background: linear-gradient(to left,#004e92,#000428); /* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
  border-top-style: solid;
  border-color: white;
  font-family: 'Unica One',Times,serif;
  font-size: 20px;
}

.navSmallScreen {
  display: none;
}

/* Style the topnav links */
.nav a {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: background 0.2s ease-out;
  }

/* Change color on hover */
.nav a:hover {
  background: #3271a7;
 }

.nav .icon {
  display: none;
}

.nav.responsive {
  font-size: 500px;
}

@media screen and (max-width: 600px) {

  .nav a:not(:nth-child(-n + 4)) {
    display: none;
  }

  .nav a {
    font-size: 20px;
  }

  .nav a.icon {
    float: right;
    display: block;
  }
  
  .nav.responsive {
    position: relative !important;
  }

  .nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .nav.responsive a {
    float: none;
    display: block;
    text-align: center;
    font-size: 20px;
  }

}
<script async rel="preload" src="https://kit.fontawesome.com/238db1ae8e.js" crossorigin="anonymous"></script>
<body onload="myFunction()">

<nav class="nav">
    <div class="nav social" id="myTopNav">
      <a href="https://www.facebook.com/Kidd-Machine-Works-LLC-2059943677574203/" target="_blank" class="fa fa-facebook" style="float:left"></a>
      <a href="https://www.linkedin.com/public-profile/in/nathan-kidd-2051558b?challengeId=AQEO5LOKZHaFRwAAAXTC5hm9W_EqnoNcTwV7lPalvSD3POFNPQjnhTeayNN-9TjAyOA6VC5ghl1n-wzt2L28nY2CdiN8N0Jaew&submissionId=b805a480-ebe2-3716-e664-f1db8ba06a0c" target="_blank" class="fab fa-linkedin-in" style="float:left"></a> 
      <a href="https://www.youtube.com/channel/UC99CmLebKd-gMEcEId_bKmw" target="_blank" class="fab fa-youtube" style="float:left"></a>
      <a href="https://www.instagram.com/kiddmachineworks/" target="_blank" class="fab fa-instagram" style="float:left"></a>
      <a href="/quote.html" class="navbtn" id="navquote">Quote</a>
      <a href="/photos.html" class="navbtn">Photos</a>
      <a href="/machines.html" class="navbtn">Machines</a>
      <a href="/store.html" class="navbtn">Automative</a>
      <a href="/index.html" class="navbtn currentpage">Home</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
    </div>
</nav>
 </body>

这是我要移动的内容：

enter image description here

感谢您的帮助！

解决方法

不确定我是否理解。我猜您希望顶部栏始终可见，并且在可见时不会与移动菜单重叠。

我所看到的是 .nav.responsive 是相对定位的。这意味着在子项中设置的顶部、底部、右侧、左侧属性将与其相关。

话虽如此，在 .icon 中，您将顶部设置为 0，因此它将被放置在 y 维度的导航上方。如果你不希望它被重叠你应该设置 .icon

  .nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 100%; // This will make the icon be as far from the top as the .nav's height
  }

尽管如此，最好为所有图标使用包装器，并用绝对位置包装元素

htmljavascriptplacementresponsive