如何使 CSS 下拉菜单可用于键盘导航？

Question

我已经看到了一些解决方案，但我不知道如何将其中一些解决方案放入我的代码中，或者某些解决方案使用了我无法在我的项目中使用的东西。

让我们进入问题：

我需要使现有的 CSS 下拉菜单可用于键盘导航。我在使用 [Tab] 打开下拉菜单方面取得了一些进展，但我无法导航到里面的选项。

这是我的代码：

    .menu .options-menu-dropdown{
        display: inline-block;
        font-family: 'OpenSans Bold';
        font-size: 16px;
        color: #646464;        
        text-decoration: none;
        cursor: pointer;
        position: relative;
    }
    .menu .menu-dropdown{
        z-index: -1;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        min-width: 180px;
        text-align: right;
        overflow: hidden;
        margin-top: -6px;
        margin-right: -6px;

        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;    
    }
.menu .options-menu-dropdown:focus .menu-dropdown,
    .menu .options-menu-dropdown:hover .menu-dropdown{
        z-index: 100;
        visibility: visible;
        opacity: 1;
    }
    .menu .title-dropdown{
        background-color: #005e8b;
        font-size: 16px;
        padding: 8px 6px;
        white-space: nowrap;
        border-bottom: 1px solid #b4b4b4;
        color: #FFF;
    }
    .menu .menu-dropdown-item{
        display: block;
        background-color: white;        
        padding: 12px 32px 12px 12px;
        text-decoration: none;
        cursor: pointer;
        font-size: 16px;
        color: #323232;
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out; 
        border-top: #b4b4b4 1px solid;
        border-left: #b4b4b4 1px solid;
        border-right: #b4b4b4 1px solid;
    }
    .menu .menu-dropdown-item:last-child{
        border-bottom: #b4b4b4 1px solid;
    }
  .menu .menu-dropdown-item:focus,
    .menu .menu-dropdown-item:hover{
        background-color: #b4b4b4;
        color: #fff;
    }

<div class="menu" align="center" >
  <div class="options-menu-dropdown" tabindex="0">
    <div>Test Menu</div>
    <div class="menu-dropdown">
      <div class="title-dropdown">Opened Test Menu</div>
      <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 1</a>
      <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 2</a>
      <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 3</a>
    </div>
  </div>
</div>

代码http://codepen.io/WillCodebit/pen/XpaqqJ

注意：我试图避免任何 javascript 解决方案，因为在这个项目中我需要对任何 javascript 使用 GWT，这是我可以的模式不违反。

提前致谢。

编辑此菜单应该与 Google 的帐户菜单具有相似的行为。而且里面的选项也必须可以通过键盘访问。

Answer 1

From Heydon Pickering - Practical ARIA examples:

<nav role="navigation" aria-label="example with dropdowns">
<ul class="with-dropdowns">
    <li><a href="#">Home</a></li>
    <li>
        <a href="/about" aria-haspopup="true">About</a>
        <ul aria-hidden="true" aria-label="submenu">
            <li><a href="/about/#who-we-are">Who we are</a></li>
            <li><a href="/about/#what-we-do">What we do</a></li>
            <li><a href="/about/#why">Why</a></li>
        </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Answer 2

感谢 Shannon Youg 的帮助。

我找到了解决方案，但我必须添加一些 Javascript 才能使其正常工作。

HTML:

<div class="my-menu">
  <a id="menuUser" href="javascript:showHideMenu()" class="">
    <div>
      Test
    </div>
  </a>
  <ul id="menuUserDropdown" class="menu-dropdown">
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 1
      </a>
    </li>
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 2
      </a>
    </li>
    <li>
      <a href="#" class="menu-dropdown-item">
        Option 3
      </a>
    </li>
  </ul>
</div>

CSS:

.my-menu a{
  display: inline-block;
  font-family: 'OpenSans Bold';
  font-size: 16px;
  color: #646464;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.my-menu a div{
  padding: 4px 5px 4px 0;
}
.my-menu a.opened div,
.my-menu a:hover div{
  background-color: #c9252b;
  color: #fff;
}
.my-menu .menu-dropdown.opened{
  display: block;
}
.my-menu div{
  display: inline-block;
  vertical-align: middle;
}
.my-menu .menu-dropdown{
  display: none;
  margin: 0;
  position: absolute;
  z-index: 30;
  background-color: #FFF;
  list-style: none;
  padding: 0;
  border: 1px solid #b4b4b4;
}
.my-menu .menu-dropdown-item{
  display: block;
  background-color: white;
  padding: 12px;
  text-decoration: none;
  width: 162px;
  cursor: pointer;
  font-size: 16px;
  color: #323232;
}
.my-menu .menu-dropdown-item:focus,
.my-menu .menu-dropdown-item:hover{
  background-color: #b4b4b4;
  color: #fff;
}

Javascript，嗯，我是用GWT做的，不过逻辑很简单：

/* Just add or remove the class "opened" from "menuUser" and "menuUserDropdown".
    You can put a "blur()" and "mouseLeave()" functions 
    to close the menu when the user moves away the cursor or 
    move the focus out of the menu too. */

Answer 3

我有完全相同的问题 – 但确实发现我的答案分散在互联网上的不同地方，这就是为什么我 post 我的解决方案在这里。这是一个没有 JavaScript 的解决方案。秘密就在于这些伪类:

li > a:hover + ul,
li > a:focus + ul,
li:focus-within > ul

完整 HTML（Header 部分）：

<header>
    <nav>
        <ul>
            <li>
                <a href="#">Page 1</a>
                <ul>
                    <li>
                        <a href="#">Sub page 1</a>
                    </li>
                    <li>
                        <a href="#">Sub page 2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Page 2</a>
                <ul>
                    <li>
                        <a href="#">Sub page 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

完整 CSS（没有实际样式）– 第一级元素并排显示 (display: inline-block;)，第二级元素隐藏并在 parent 元素处于活动状态：

header ul {
    list-style: none;
}

header nav > ul > li {
    display: inline-block;
    vertical-align: top;
}

header nav > ul > li > ul {
    visibility: hidden;
    opacity: 0;
}

header nav > ul > li > a:hover + ul,
header nav > ul > li > a:focus + ul,
header nav > ul > li:focus-within > ul {
    visibility: visible;
    opacity: 1;
}

如何使 CSS 下拉菜单可用于键盘导航？

How can i make a CSS drop down menu accessible for keyboard navigation?

html

css

drop-down-menu

accessibility

keyboard-navigation