代码之家 › 专栏 › 技术社区 › Blackbam

如何处理触摸屏设备上使用的多级菜单:悬停和:焦点可点击的顶层链接?

touch responsive-design css html javascript

Blackbam · 技术社区 · 6 年前

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#my-menu-inner > ul {
  margin:10px;
  width:100%;
  background-color:yellow;
  list-style-type:none;
  position:relative;
}

#my-menu-inner > ul > li {
  float:left;
  margin:20px;
}

#my-menu-inner > ul > li > a {
  padding:20px;
  border:1px solid black;
  display:block;
}

#my-menu-inner > ul > li > div.sub {
   position:absolute;
   top:calc(100%  - 20px);
   background-color:red;
   padding:40px;
   display:none;
   left:0;
   width:100vw;
}

#my-menu-inner > ul > li a:hover + div.sub, #my-menu-inner > ul > li a:focus + div.sub,
#my-menu-inner > ul > li > div.sub:hover, #my-menu-inner > ul > li > div.sub:focus {
    display:block;
}

<div id="whatever">Just something before ...</div>
<div id="my-menu">
  <div id="my-menu-inner">
    <ul class="clearfix">
      <li>
        <a href="http://www.example.com/foo/">foo</a>
        <div class="sub">
          <ul>
            <li><a href="http://www.example.com/mobile/">mobile</a></li>
            <li><a href="http://www.example.com/users/">users</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="http://www.example.com/bar/">bar</a>
        <div class="sub">
          <ul>
            <li><a href="http://www.example.com/never/">never</a></li>
            <li><a href="http://www.example.com/see-me/">see me</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

这是一个很好的工作菜单谁是有鼠标或触摸板。但是:移动设备的用户永远不会看到子菜单,因为他们会立即转到 href 一旦他们点击其中一个链接。它们没有悬停状态,ofc。

:为触摸设备提供单独的移动菜单。这是伟大的,因为大多数设计有单独的移动菜单无论如何。

问题: @media screen (max-width: 1000px) 这将不是一个足够的方法来检测用户是否能够悬停/聚焦,例如,所有拥有大触摸屏的人都将被排除在外。

想法二: preventDefault() 点击链接。检查之前是否检测到鼠标移动,如果是,请按照链接进行操作。如果不需要再次单击。

问题:需要两次点击可能对用户不友好(许多人不会意识到链接是可点击的)。

1 回复 | 直到 6 年前

Temani Afif 6 年前

我认为一个好的实践是制作一个可见的可点击的元素。您不仅应该考虑实现,还应该考虑用户将如何交互。用户需要知道有一个子菜单,要做到这一点,你可以添加一个小图标,可能出现在任何地方,即使我们可以 :hover .

$('li span').click(function() {
    $(this).next('.sub').toggleClass('show');
    $(this).toggleClass('open');
})

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#my-menu-inner > ul {
  margin:10px;
  width:100%;
  background-color:yellow;
  list-style-type:none;
  position:relative;
}

#my-menu-inner > ul > li {
  float:left;
  margin:20px;
}

#my-menu-inner > ul > li > a {
  padding:20px;
  border:1px solid black;
  display:inline-block;
}
#my-menu-inner > ul > li > span {
  text-decoration:none;
  display:inline-block;
  padding:20px 5px;
  border:1px solid black;
  margin-right:-10px;
  cursor:pointer;
}
#my-menu-inner > ul > li > span:before {
  content:"â¼"
}
#my-menu-inner > ul > li > span.open:before {
  content:"â²"
}

#my-menu-inner > ul > li > div.sub {
   position:absolute;
   top:calc(100%  - 20px);
   background-color:red;
   padding:40px;
   display:none;
   left:0;
   width:100vw;
}

#my-menu-inner > ul > li a:hover ~ div.sub,
#my-menu-inner > ul > li span:hover ~ div.sub,
#my-menu-inner > ul > li a:focus ~ div.sub,
#my-menu-inner > ul > li span:focus ~ div.sub,
#my-menu-inner > ul > li > div.sub:hover, 
#my-menu-inner > ul > li > div.sub:focus,
#my-menu-inner > ul > li > div.sub:hover, 
#my-menu-inner > ul > li > div.sub.show{
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="whatever">Just something before ...</div>
<div id="my-menu">
  <div id="my-menu-inner">
    <ul class="clearfix">
      <li>
        <a href="http://www.example.com/foo/">foo</a><span></span>
        <div class="sub">
          <ul>
            <li><a href="http://www.example.com/mobile/">mobile</a></li>
            <li><a href="http://www.example.com/users/">users</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="http://www.example.com/bar/">bar</a><span></span>
        <div class="sub">
          <ul>
            <li><a href="http://www.example.com/never/">never</a></li>
            <li><a href="http://www.example.com/see-me/">see me</a></li>
          </ul>
        </div>
      </li>
       <li>
        <a href="http://www.example.com/bar/">I don't have submenu</a>
        
      </li>
    </ul>
  </div>
</div>