移动响应式菜单放置答案

【问题标题】：Mobile responsive menu placement移动响应式菜单放置
【发布时间】：2021-01-29 13:32:44
【问题描述】：

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

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>

这是我要移动的内容：

感谢您的帮助！

【问题讨论】：

您将社交链接与页面链接混合在一起，方法是将它们全部放在具有“nav social”类的同一个父级中。如果您将链接分组在不同的父母中，实现您所需要的会更容易。
您的 HTML 中还缺少一个结束 div
如果有人想跳进去，我仍然在努力解决这个问题！

标签： javascript html css responsive placement

【解决方案1】：

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

我看到的是 .nav.responsive 是相对定位的。这意味着在子项中设置的 top、bottom、right、left 属性将相对于它。

话虽如此，在 .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
  }

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

【讨论】：

感谢包装器的建议-我认为这可能是一种解决方案。我添加了一张我正在尝试做的事情的图片。