目前,我的下拉菜单仅在用户滚动时显示。
我希望如此,如果您按下TAB键,下拉列表将以相同的方式显示
我的菜单基于以下基础:
我唯一更新代码的是CSS中的样式
以下是我的菜单部分:
HTML:
<ul id="menu">
<li><a href="about-us.php" class="drop">About us</a>
<div class="dropdown_1column align_left">
<div class="col_1">
<ul class="simple">
<li><a href="why-choose-us.php">Why choose us</a></li>
<li><a href="our-office.php">Our office</a></li>
</ul>
</div>
</div>
</li>
<li><a href="how-we-help.php" class="drop">How we help</a>
<div class="dropdown_2columns align_left">
<div class="col_2">
<h3 class="link-menu-title"><a href="#">Technology</a></h3>
<ul>
<li><a href="dynamic-purchasing.php" style="width:270px;">Dynamic purchasing with Matrix</a></li>
<li><a href="process.php">Process</a></li>
<li><a href="interfacing.php">Interfacing</a></li>
<li><a href="implementation.php">Implementation</a></li>
</ul>
</div>
<div class="col_2">
<h3 class="link-menu-title"><a href="#">Professional Support Services</a></h3>
<ul>
<li><a href="discovery.php">Discovery</a></li>
<li><a href="account-management.php">Account management</a></li>
<li><a href="business-management.php" style="width:270px;">Business management</a></li>
<li><a href="supplier-management.php"> Supplier management</a></li>
</ul>
</div>
</div>
</li>
</ul>
和CSS
#menu li.menu-icon:hover {
background-color:#212121;
border:0px;
}
a#home span {
position: absolute;
top: -999em;
}
#menu {
list-style:none;
width:730px;
margin:0px auto 0px auto;
height:73px;
/* Background color and gradients */
/* Borders */
border: 0px solid #002232;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 0px 4px 0px;
margin-right:12px;
margin-top:25px;
border:none;
}
#menu li:hover {
border: 1px solid #11A7E6;
padding: 4px 0px 4px 0px;
/* Background color and gradients */
background: #11A7E6;
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color: #FFFFFF;
display:block;
outline:0;
text-decoration:none;
}
.medium #menu li a {
font-size:16px;
}
.large #menu li a {
font-size:20px;
}
.medium #menu li .drop, .large #menu li .drop {
padding-right: 0px;
}
#menu li:hover a {
color:#ffffff;
text-shadow: 1px 1px 1px #000000;
}
#menu li .drop {
padding-right:8px;
}
#menu li:hover .drop {
padding-right:3px;
padding-left:3px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border-top:10px solid #11A7E6;
/* Gradient background */
background:#2D2D2D;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #000000;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 3px 0;
padding-bottom:3px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 3px 0;
padding-bottom:3px;
border-bottom:1px solid #666666;
}
#menu p {
line-height:18px;
margin:0 0 30px 0;
}
#menu li:hover div a {
font-size:12px;
color:#0ea4e3;
padding-bottom:2px;
}
.medium #menu li:hover div a {
font-size:15px;
}
.large #menu li:hover div a {
font-size:19px;
}
#menu li:hover div h2.link-menu-title a{
font-size:14px;
font-weight:bold;
color:#FFF;
}
#menu li:hover div h3.link-menu-title a{
font-size:14px;
font-weight:bold;
color:#FFF;
}
.medium #menu li:hover div h3.link-menu-title a{
font-size:17px;
}
.large #menu li:hover div h3.link-menu-title a{
font-size:21px;
}
#menu li:hover div a:hover {
color:#fff;
background-color: #474747;
}
答案 0 :(得分:4)
看一下教程,使全键盘可访问并不是一个好的起点。不幸的是,按Tab键不仅仅是显示下拉菜单的问题。
一旦你在每个下拉列表中找到了几个项目,对于键盘用户来说,选择每个选项都不是一件好事。
有两种主要方法可以访问此类菜单:
传统方法:让每个顶级链接转到包含菜单中链接的着陆页,然后隐藏键盘中的下拉列表使用
HTML5(新)方法:使用WAI-ARIA标记和大量脚本来启用全键盘可访问性。
传统方法如果相当容易,您只需要在display: none;
开始的类上使用.dropdown_1column
正确隐藏屏幕外的菜单。意味着键盘用户不会通过子菜单进行选项卡。
然后使用display: block
显示CSS开始时悬停(不焦点)的子菜单:
#menu li:hover .dropdown_1column
为了实现HTML5 / new方法,我将从Adobe的开源“Accessible Mega Menu”开始。从头开始执行此操作将是一项繁重的工作,除非您知道如何使用各种用户代理进行测试,否则它不太可能像Adobe一样好用。
答案 1 :(得分:0)
请上传您的标记和样式。 无论如何这里是一个样本菜单,可以在选项卡上工作。
.dropdown {
position: relative;
display: inline-block;
font-size: 110%;
}
.dropdown ul {
position: absolute;
top: -100%;
left: 100%;
display: none;
background-color: inherit;
padding: 0;
list-style: none;
border: 1px solid #ccc;
}
.dropdown ul li {
position: relative;
list-style: none;
margin: 5px 0;
background-color: inherit;
}
.dropdown ul li a {
display: block;
padding: 3px 10px;
}
.dropdown ul li a:hover {
background-color: #18b6f2 !important;
}
.dropdown ul li:hover > ul {
display: block;
top: 0;
background-color: inherit;
}
.dropdown ul li:hover > a {
background-color: #85ddff;
}
.dropdown:focus > ul {
display: block;
}
//标记
<div class="dropdown" style="background-color: white;" tabindex="1">
<a>Menu</a>
<ul>
<li>
<a>Fruits</a>
<ul>
<li><a>Apple</a></li>
<li><a>Orange</a></li>
<li><a>Grape</a></li>
<li><a>Banana</a></li>
</ul>
</li>
<li>
<a>Vegetables</a>
<ul>
<li><a>Lemon</a></li>
<li><a>Cucumber</a></li>
<li><a>Melon</a></li>
</ul>
</li>
</ul>
</div>
你需要给一个tabindex值来使一个元素可聚焦(默认情况下这是不可聚焦的)。然后你css3:焦点选择器在元素聚焦时触发。
如果你写下你的确切要求,可以提供帮助
答案 2 :(得分:-1)
这是一个演示。这是与纯css最接近的。
<section class="header">
<div class="dropdown">
<ul>
<li>
<input type="radio" name="dropdown" />
<a>Menu 1</a>
<ul>
<li>
<a tabindex="1">Submenu 1</a>
</li>
<li>
<a tabindex="1">Submenu 2</a>
</li>
<li>
<a tabindex="1">Submenu 3</a>
</li>
<li>
<a tabindex="1">Submenu 4</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="dropdown" />
<a>Menu 2</a>
<ul>
<li>
<a tabindex="1">Submenu 1</a>
</li>
<li>
<a tabindex="1">Submenu 2</a>
</li>
<li>
<a tabindex="1">Submenu 3</a>
</li>
<li>
<a tabindex="1">Submenu 4</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="dropdown" />
<a>Menu 3</a>
<ul>
<li>
<a tabindex="1">Submenu 1</a>
</li>
<li>
<a tabindex="1">Submenu 2</a>
</li>
<li>
<a tabindex="1">Submenu 3</a>
</li>
<li>
<a tabindex="1">Submenu 4</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="dropdown" />
<a>Menu 4</a>
<ul>
<li>
<a tabindex="1">Submenu 1</a>
</li>
<li>
<a tabindex="1">Submenu 2</a>
</li>
<li>
<a tabindex="1">Submenu 3</a>
</li>
<li>
<a tabindex="1">Submenu 4</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="dropdown" />
<a>Menu 5</a>
<ul>
<li>
<a tabindex="1">Submenu 1</a>
</li>
<li>
<a tabindex="1">Submenu 2</a>
</li>
<li>
<a tabindex="1">Submenu 3</a>
</li>
<li>
<a tabindex="1">Submenu 4</a>
</li>
</ul>
</li>
</ul>
</div>
</section>
CSS
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
.header {
position: fixed;
left: 0;
top: 0;
height: 100px;
width: 100%;
background-color: black;
}
.header .dropdown {
margin: 50px 0 0 300px;
}
ul {
margin: 0;
padding: 0;
}
.dropdown {
color: #fff;
position: relative;
}
.dropdown > ul {
display: block !important;
background-color: black !important;
}
.dropdown > ul > li {
display: inline-block;
width: 100px;
margin: 0 10px;
position: relative;
}
.dropdown > ul > li input[type="radio"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
}
.dropdown > ul > li input[type="radio"]:checked ~ ul {
display: block;
}
.dropdown > ul > li input[type="radio"]:focus ~ a {
border-bottom: 2px solid #ccc;
}
.dropdown ul {
position: absolute;
left: 0;
display: none;
z-index: 99;
background-color: #2b2b2b;
width: 200%;
}
.dropdown ul li {
position: relative;
list-style: none;
cursor: pointer;
}
.dropdown ul li a {
display: block;
padding: 10px 15px;
}
.dropdown ul li a:focus {
outline: none;
background-color: #0bd2f6;
}
.dropdown ul li:hover > ul {
display: block !important;
}