Question

我正在尝试帮助制作菜单系统的朋友，它在浏览器中运行良好但在手机上无法正常工作。他们使用图像作为＆＃34;菜单＆＃34;按钮，当我将鼠标悬停在按钮上时，菜单会按预期下降。

但是，在我的手机上，我无法将鼠标悬停在手机上，因此它无法执行任何操作。如果我点击它，它也没有做任何事情。我觉得这对我来说很愚蠢和容易，但我无法理解我的生活。我知道CSS足以使大部分工作正常但响应式设计还不是很好。

我确信问题出在@media查询中，但我没看到做错了什么。

＆＃13;

@media (max-width: 680px) {
  #navbar {
    overflow: visible!important;
  }
  #navwrapper {
    position: fixed;
    top: 0;
    left: 20px;
    width: 150px;
    height: 50px;
    background: url('menuicon.png') top left no-repeat;
    overflow: visible;
  }
  #navwrapper ul {
    display: none;
    width: auto;
    max-width: 310px;
    background: #333;
    margin: 50px 0 0 0;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
    position: relative;
    top: 0;
    left: 0;
  }
  #navwrapper li {
    display: block;
    height: 30px;
    line-height: 30px;
    float: none;
    clear: both;
    overflow: hidden;
    border: none;
    z-index: 200;
    transition: none;
  }
  #navwrapper ul li:first-child {
    padding: 0!important;
  }
  #navwrapper a:link,
  #navbar a:visited,
  #navbar a:active {
    padding: 0 25px;
    font-size: 13px;
    line-height: 30px;
    display: inline;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-shadow: 0px 2px 5px #333;
    width: 100%;
    float: none;
    transition: none;
  }
  #navbar li:hover,
  #navbar li:focus,
  #navbar a:hover,
  #navbar a:focus {
    background: #111;
  }
  #navwrapper:hover {
    width: auto;
    height: auto;
    overflow: visible;
  }
  #navwrapper:hover ul,
  #navwrapper ul:hover {
    display: block;
    height: auto;
  }
}

＆＃13;

<div id="navbar">
  <div id="navwrapper">
    <ul class="menu">
      <li id="home"><a href="index.html">Index</a>
      </li>
      <li id="about"><a href="about.html">About</a>
      </li>
      <li id="link1"><a href="link1.html">Link 1</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

非常感谢任何正确方向的想法或捅。

Answer 1

根据我的经验，悬停和移动设备根本不能一起使用。让它们工作所需的变通方法（即黑客）数量并不值得牺牲代码的脆弱性和可维护性。

您应该能够将菜单更改为带有复选框的标签，以适应移动点击，并仍然将悬停添加到标签以在桌面上保留该功能。（是的，这对于移动菜单而言是众所周知的＆＃34;复选框 hack ＆＃34;，但它比尝试模拟 更少hackish 在移动设备上盘旋。）

HTML将是：

<div id="navbar"> <input type="checkbox" id="menuBtn"> <label for="menuBtn"><img src="myMenuButton.png"></label> <ul class="menu"> <li id="home"><a href="index.html">Index</a></li> <li id="about"><a href="about.html">About</a></li> <li id="link1"><a href="link1.html">Link 1</a></li> </ul> </div>

用于制造魔法的CSS：

#navbar #menuBtn, #navbar ul.menu { display: none; } #navbar #menuBtn:checked ~ ul.menu, #navbar #menuBtn + label:hover ~ ul.menu { display: block; }

此CSS仅用于在label悬停（在桌面上）或点击（桌面或移动）时显示菜单。当然，您可以拆分第二组规则并将其包装在媒体查询中，以便checked规则仅适用于移动设备，如果您不希望桌面用户点击菜单并保留它打开。

您还需要将您的特定样式和定位CSS规则集成到上面，但这应该从功能的角度出发。

CSS Nav菜单无法在移动设备上单击

1 个答案: