响应式移动菜单未展开答案

【问题标题】：Responsive Mobile Menu not expanding响应式移动菜单未展开
【发布时间】：2019-09-18 01:40:21
【问题描述】：

我在 CodeIgnitor 上开发的博客中添加了一个响应式菜单。仅供参考，其他人制作了这个博客。一切正常，但点击图标展开菜单时，移动设备中的菜单没有展开。

function myMenuFunction() {
  var x = document.getElementById("nav");
  if (x.className === "navMenuCustom") {
    x.className += " responsive";
  } else {
    x.className = "navMenuCustom";
  }
}

.navMenuCustom {
  background-color: #333;
  overflow: hidden;
  font-weight: 900;
}

.navMenuCustom a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  padding: 8px 16px;
}

.navMenuCustom a:hover {
  background-color: #ddd;
  color: black;
}

.navMenuCustom a:active {
  background-color: #4CAF50;
  color: white;
}

.navMenuCustom .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navMenuCustom a:not(:first-child) {
    display: none;
  }
  .navMenuCustom a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navMenuCustom.responsive {
    position: relative;
  }
  .navMenuCustom.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navMenuCustom.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<div id="nav" class="navMenuCustom">
  <a href="/learn-guitar-fast">Learn Guitar Fast</a>
  <a href="/teach-yourself-guitar">Teach Yourself Guitar</a>
  <a href="/how-to-buy-a-guitar">How to Buy a Guitar</a>
  <a href="/stringninja">String Ninja</a>
  <a href="/easy-guitar-songs">Easy Guitar Songs</a>
  <a href="/contact">Contact</a>
  <a href="/blog">Blog</a>
  <a href="javascript:void(0);" class="icon" onclick="myMenuFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

我使用 w3schools 教程来添加响应式菜单。 Link to w3schools tutorial。也可以查看直播网站here。

【问题讨论】：

刚刚为菜单添加了宽度和高度a。 .navMenuCustom a.icon { float: right; display: block; width: 20px; height: 20px; }这是一个小提琴链接：jsfiddle.net/6x9yczq2/2

标签： html css responsive

【解决方案1】：

您的菜单不起作用的原因是因为您有“溢出：隐藏”。溢出隐藏导致其他元素不显示，这是因为它们将出现在父 div 下方。当您的页面为移动尺寸时，您必须删除“溢出：隐藏”，以便其他菜单项可以显示。

@media only screen and (max-width: 600px){
   .navMenuCustom {
      overflow: auto;
   }
}

我也会给 a 属性一个背景色。

.navMenuCustom a {
   background-color: #444;
}

剩下的唯一问题是您的图像具有比菜单项更高的 z-index，因此它会显示在其上方。您可以使用以下代码解决此问题：

在要显示在顶部的元素上添加更高的索引。

#nav {
   z-index: 10
}

#slideshow-main-homepage div img {
    z-index: 9;
}

【讨论】：

【解决方案2】：

它有效，但.navMenuCustom 有overflow: hidden，所以你看不到它。

快速解决方法是将overflow: visible 添加到.navMenuCustom.responsive。但是您仍然什么也看不到，因为这些项目具有透明背景和浅色字体。您还必须将background-color 设置为.navMenuCustom.responsive a。最后一个问题是标题图像将出现在导航上方。您可以通过删除其元素的所有position: relative 属性来解决此问题（我数了其中三个：#banner-home、#slideshow-main-homepage 和<div style="...">），但我不确定它是否不能破坏其他任何东西。你必须稍微测试一下。

【讨论】：

【解决方案3】：

这是因为您在#nav 中使用 !important 声明了高度，我建议将其删除或使用下面的代码。

@media screen and (max-width: 600px) {
  #nav {
    height: auto !important;
 }
}

【讨论】：