无Javascript的HTML5 / CSS3下拉菜单 [英] Accessible HTML5/CSS3 dropdown menu without Javascript
本文介绍了无Javascript的HTML5 / CSS3下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用纯CSS创建了一个下拉菜单，它使用鼠标，但我想通过键盘更容易访问。我不想使用Javascript来执行此操作。
这里是一段HTML代码片段， jsfiddle ：
< nav&
< ul>
< li>< a href =＃>首页< / a>< / li&
< li>< a href =＃>关于我们& raquo;< / a>
< ul>
< li>< a href =＃>选项1< / a>< / li>
< li>< a href =＃>选项2< / a>< / li>
< li>< a href =＃>选项3< / a>< / li>
< li>< a href =＃>选项4< / a>< / li>
< li>< a href =＃>选项5< / a>< / li>
< / ul>
< / li>
< / ul>
< / nav>
这里是CSS：
BODY {
font-family：Arial，Helvetica，Swiss，Geneva，Sans-serif;
font-size：0.8em;
width：795px;
margin：0px auto;
padding：0px;
}
nav ul ul {
display：none;
}
nav ul li：hover> ul，nav ul li：focus> ul，nav ul li：active> ul {
display：block;
}
nav ul {
background：＃696969;
padding：0px 0px;
list-style：none;
position：relative;
display：inline-table;
}
nav ul：after {
content：;
clear：both;
display：block;
}
nav ul li {
float：left;
border-bottom：1px solid #FFF;
}
nav ul li：hover，nav ul li：focus，nav ul li：active {
background：＃F8A509;
}
nav ul li：hover a，nav ul li：focus a，nav ul li：active a {
color：#fff;
}
nav ul li a {
display：block;
padding：4px 14px;
color：#fff;
text-decoration：none;
}
nav ul ul {
background：＃BDD575;
padding：0px;
position：absolute;
top：100％;
-moz-box-shadow：2px 2px 4px 0px rgba（0,0,0,0.20）;
-webkit-box-shadow：2px 2px 4px 0px rgba（0,0,0,0.20）;
box-shadow：2px 2px 4px 0px rgba（0,0,0,0.20）;
}
nav ul ul li {
float：none;
border-bottom：1px solid #FFF;
position：relative;
}
nav ul ul li a {
padding：4px 14px;
color：#fff;
white-space：nowrap;
border-right：1px solid #FFF;
}
nav ul ul li a：hover，nav ul ul li a：focus，nav ul ul li a：active {
background：＃9ED112;
color：#fff;
}
nav ul ul ul {
position：absolute;左：100％; top：0;
}
任何想法，我错了？
http://www.w3.org/TR/wai-aria/roles#menubar =nofollow>可访问富Internet应用程序（WAI-ARIA） 可补充HTML其中的属性明确地传达组成菜单系统的各个部分的角色，状态和属性。当辅助技术（AT）用户与菜单交互时，ARIA将更新的信息传递给他们的AT，然后他们的AT以有意义的方式传达该信息。
< h2> 工作演示
标记
< nav role =navigationaria-label =主菜单>
< ul id =navrole =menubararia-hidden =false>
< li role =menuitemaria-havepopup =false>< a href =＃>首页< / a>< / li&
< li tabindex =0aria-havepopup =true>< a href =＃>关于我们& raquo;< / a>
< ul data-test =truerole =menuaria-hidden =true>
< li role =menuitem>< a href =＃tabindex = - 1>选项1< / a>< / li>
< li role =menuitem>< a href =＃tabindex = - 1>选项2< / a>< / li>
< li role =menuitem>< a href =＃tabindex = - 1>选项3< / a>< / li&
< li role =menuitem>< a href =＃tabindex = - 1>选项4< / a>< / li&
< li role =menuitem>< a href =＃tabindex = - 1>选项5< / a>< / li>
< / ul>
< / li>
< / ul>
< / nav>
I have created a dropdown menu using pure css, which works fine with a mouse, but I would like to make it more accessible via the keyboard. I don't want to use Javascript to do this.
Here is a snippet of the html code, and a jsfiddle:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us »</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
</ul>
</li>
</ul>
</nav>
And here is the CSS:
BODY {
font-family : Arial, Helvetica, Swiss, Geneva, Sans-serif;
font-size: 0.8em;
width: 795px;
margin: 0px auto;
padding: 0px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul, nav ul li:focus > ul, nav ul li:active > ul {
display: block;
}
nav ul {
background: #696969;
padding: 0px 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border-bottom: 1px solid #FFF;
}
nav ul li:hover, nav ul li:focus, nav ul li:active {
background: #F8A509;
}
nav ul li:hover a, nav ul li:focus a, nav ul li:active a {
color: #fff;
}
nav ul li a {
display: block;
padding: 4px 14px;
color: #fff;
text-decoration: none;
}
nav ul ul {
background: #BDD575;
padding: 0px;
position: absolute;
top: 100%;
-moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
-webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
}
nav ul ul li {
float: none;
border-bottom: 1px solid #FFF;
position: relative;
}
nav ul ul li a {
padding: 4px 14px;
color: #fff;
white-space: nowrap;
border-right: 1px solid #FFF;
}
nav ul ul li a:hover, nav ul ul li a:focus, nav ul ul li a:active {
background: #9ED112;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Any ideas where I am going wrong?
TIA for any helpful advice.
解决方案
The W3C's draft specification for Accessible Rich Internet Applications (WAI-ARIA) makes it possible to supplement HTML with attributes that explicitly communicate the roles, states, and properties of the various parts that make up a menu system. As assistive technology (AT) users interact with the menu, ARIA passes updated information to their AT, and their AT then communicates that information in meaningful ways.
See more about on Accessible Dropdown Menus
Working Demo
Markup
<nav role="navigation" aria-label="Main menu">
<ul id="nav" role="menubar" aria-hidden="false">
<li role="menuitem" aria-haspopup="false"><a href="#">Home</a></li>
<li tabindex="0" aria-haspopup="true"><a href="#">About us »</a>
<ul data-test="true" role="menu" aria-hidden="true">
<li role="menuitem"><a href="#" tabindex="-1">Option 1</a></li>
<li role="menuitem"><a href="#" tabindex="-1">Option 2</a></li>
<li role="menuitem"><a href="#" tabindex="-1">Option 3</a></li>
<li role="menuitem"><a href="#" tabindex="-1">Option 4</a></li>
<li role="menuitem"><a href="#" tabindex="-1">Option 5</a></li>
</ul>
</li>
</ul>
</nav>
这篇关于无Javascript的HTML5 / CSS3下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
