响应式移动菜单未展开

Question

我在 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.

Answer 1

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

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

Answer 2

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

@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;
}

Answer 3

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

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

响应式移动菜单未展开

Responsive Mobile Menu not expanding

html

css

responsive