如何使 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

來自 Heydon Pickering - 實用的 ARIA 示例：

<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

我有完全相同的問題 - 但確實發現我的答案分散在互聯網上的不同地方，這就是我在這里發布我的解決方案的原因。 這是一個無需 JavaScript 即可工作的解決方案。 秘密在於這些偽類：

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

完整的 HTML（標題部分）：

<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; ），第二級元素被隱藏並在父元素處於活動狀態時立即顯示：

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