Создание раскрывающихся меню, доступных только при использовании клавиатуры

Question

В настоящее время мои выпадающие меню отображаются только тогда, когда пользователь перекатывает их.

Я хотел бы так, если вы нажали клавишу TAB падение вниз будет отображаться таким же образом

Мое меню основано на следующем tutroial:

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

Глядя на учебник, это не очень хорошая отправная точка, чтобы сделать полностью доступным с клавиатуры. К сожалению, это не просто вопрос раскрытия при нажатии вкладки.

Как только вы пройдете пару пунктов в каждом раскрывающемся списке, это не очень хорошо для пользователей клавиатуры, чтобы они могли выполнять каждую опцию.

Есть два основных способа сделать этот тип меню доступный:

1. Традиционный метод: сделать каждую ссылку верхнего уровня пройти на целевую страницу, которая содержит ссылки из меню, и скрыть выпадающие списки с клавиатуры.

2. HTML5 (новый) метод: Используйте разметку WAI-ARIA и множество сценариев, чтобы обеспечить полную доступность клавиатуры.

Традиционный метод, если довольно легко сделать, вам просто нужно правильно скрыть меню, которые вне экрана с использованием display: none; на классах, начиная .dropdown_1column. Пользователи клавиатуры не будут вставлять субменю.

И затем использовать display: block, чтобы показать подменю при наведении курсора мыши (не фокус), где CSS начинается:

#menu li:hover .dropdown_1column 

Для достижения/новый метод HTML5 Я хотел бы начать с компании Adobe с открытым кодом "Accessible Mega Menu ». Это будет огромная работа, чтобы сделать это с нуля, и если вы не знаете, как тестировать с помощью широкого спектра пользовательских агентов, это вряд ли будет работать так же хорошо, как и Adobe.

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, чтобы сделать элемент focusible (который не focusible по умолчанию) .. Тогда вы CSS3: селектор фокус срабатывает, когда элемент находится в фокусе.

Может быть в состоянии помочь, если вы запишите точное требование

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