我怎样才能使CSS下拉菜单可以访问键盘导航？

  • Z时代
  • 2024-01-10
  • 分类：问答

我看到了一些解决方案，但我无法弄清楚如何将这些解决方案放在我的代码中，或者某些解决方案使用了某些我无法在我的项目中使用的解决方案。我怎样才能使CSS下拉菜单可以访问键盘导航？

让我们进入正题：

我需要为键盘导航已经存在的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的解决方案，因为在这个项目中我需要使用GWT对于任何JavaScript，这是一种我无法违反的模式。

在此先感谢。

编辑 此菜单应该具有与Google的帐户菜单类似的行为。内部的选项也必须通过键盘访问。

回答：

感谢香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. */

回答：

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>

以上是 我怎样才能使CSS下拉菜单可以访问键盘导航？ 的全部内容， 来源链接： utcz.com/qa/257396.html

回到顶部