css - 仅使用键盘时可访问我的下拉菜单

Question

目前，我的下拉菜单仅在用户滚动它们时出现。

我想要它，所以如果您按下 TAB 键，下拉菜单将以相同的方式出现

我的菜单基于以下教程：

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

我唯一明智地更新了代码的是 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;


}

Answer 1

查看本教程，使完全键盘可访问并不是一个好的起点。不幸的是，这不仅仅是在按下 Tab 时显示下拉菜单的问题。

一旦您通过了每个下拉菜单中的几个项目，对于键盘用户来说，必须通过每个选项进行选项卡并不是一件好事。

有两种主要方法可以使此类菜单易于访问：

1. 传统方法：让每个顶级链接都进入包含菜单链接的登录页面，并隐藏下拉菜单以防止键盘使用。

2. HTML5（新）方法：使用 WAI-ARIA 标记和大量脚本来启用全键盘可访问性。

传统方法如果相当容易做到，您只需要在display: none;开始的类上正确隐藏屏幕外的菜单.dropdown_1column。这意味着键盘用户不会通过子菜单进行选项卡。

然后用于display: block在悬停（不是焦点）时显示子菜单，CSS 开始的位置：

#menu li:hover .dropdown_1column

为了实现 HTML5/新方法，我将从 Adob​​e 的开源“ Accessible Mega Menu ”开始。从头开始做这件事需要大量的工作，除非您知道如何使用各种用户代理进行测试，否则它不太可能像 Adob​​e 那样工作。

Answer 2

请上传您的标记和样式。无论如何，这里是一个在选项卡上工作的示例菜单。

  .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 :focus 选择器在元素处于焦点时触发。

如果您写下您的确切要求，可能会有所帮助

Answer 3

这是一个演示。这是最接近纯 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;
}