Question

我正在尝试构建一个简单的dropdownmenu（jFiddle），即使禁用了javascript，也可以使用tab键访问它。

ul {
  list-style-type: none;
}
#nav > li {
  display: inline-block;
  cursor: pointer;
}
#nav a {
  text-decoration: none;
  color: white;
  padding: 20px;
  display: inline-block;
}
li {
  width: 100px;
  color: white;
  background-color: #08C;
}
ul ul {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
}
ul#nav > li:hover > ul {
  display: block;
}

<ul id='nav'>
  <li><a href='#'>Menu 1</a>
    <ul>
      <li><a href='#'>Eintrag 1</a></li>
      <li><a href='#'>Eintrag 2</a></li>
    </ul>
  </li>
  <li><a href='#'>Menu 2</a>
    <ul>
      <li><a href='#'>Eintrag 1</a></li>
      <li><a href='#'>Eintrag 2</a></li>
      <li><a href='#'>Eintrag 3</a></li>
      <li><a href='#'>Eintrag 4</a></li>
    </ul>
  </li>
</ul>

是否可以使用纯CSS的tab键遍历条目？

我想按如下方式遍历链接：

菜单1 - ＆gt; Eintrag 1 - ＆gt; Eintrag 2 - ＆gt;菜单2 - ＆gt; Eintrag 1 - ＆gt; Eintrag 2 - ＆gt; Eintrag 3 - ＆gt; Eintrag 4

使用CSS代码

a:focus + ul{
   display: block;
 }

我可以选择菜单1 ，然后 Eintrag 1 和 Eintrag 2 可见。再次按下选项卡会聚焦 Eintrag 1 ，然后再次看不到ul（因为它显示为：none），因此我无法访问 Eintrag 2 。是否有一个简单的CSS解决方案如何标记所有条目？

Answer 1

考虑到我理解你的要求，这是我的回答：

Tabs在某种程度上像Radio按钮一样工作。您只能在实例中选择一个。为什么不将每个选项卡关联到单选按钮，并根据所选的单选按钮检查当前选项卡。

ul{
  list-style-type: none;
}

#nav > li{
  display: inline-block;
  cursor: pointer;
}

#nav label, #nav a{
  text-decoration: none;
  color: white;
  padding: 20px;
  display: inline-block;
}

li{  
  width: 100px;
  color: white;
  background-color: #08C;
}

ul ul{
  display:none;
  position: absolute;
  padding: 0;
  margin: 0;
}

ul#nav input.tabset{
width:0px;
  height:0px;
  padding:0px;
}

ul#nav input.tabset:checked ~ ul{
  display: block;
}

<ul id='nav'>
  <li><input class="tabset" id="menu1" name="tabset1" type="radio" /><label for="menu1" href='#'>Menu 1</label>
    <ul>
      <li><a href='#'>Eintrag 1</a></li>
      <li><a href='#'>Eintrag 2</a></li>
    </ul>
  </li>
  <li><input class="tabset" id="menu2" name="tabset1" type="radio" /><label for="menu2" href='#'>Menu 2</label>
    <ul>
      <li><a href='#'>Eintrag 1</a></li>
      <li><a href='#'>Eintrag 2</a></li>
      <li><a href='#'>Eintrag 3</a></li>
      <li><a href='#'>Eintrag 4</a></li>
    </ul>
  </li>
</ul>

Answer 2

如果您在tabindex="XXXX"代码中写<a>，当XXXX是增量编号时，tabindex将定义按Tab键聚焦元素的顺序。< / p>

所以：

<ul id='nav'>
  <li><a href='#' tabindex="1">Menu 1</a>
    <ul>
      <li><a href='#' tabindex="2">Eintrag 1</a></li>
      <li><a href='#' tabindex="3">Eintrag 2</a></li>
    </ul>
  </li>
  <li><a href='#' tabindex="4">Menu 2</a>
    <ul>
      <li><a href='#' tabindex="5">Eintrag 1</a></li>
      <li><a href='#' tabindex="6">Eintrag 2</a></li>
      <li><a href='#' tabindex="7">Eintrag 3</a></li>
      <li><a href='#' tabindex="8">Eintrag 4</a></li>
    </ul>
  </li>
</ul>

如果您需要一个非焦点元素，请将tabindex="-1"设置为该元素。

您还需要修改CSS，将悬停状态设置为与焦点状态相同，以打开焦点：

 ul#nav > li:hover > ul
 ul#nav > li:focus > ul {
    display: block;
 }

Dropdownmenu Tabkey纯CSS

2 个答案: