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;


}

score 0 · Accepted Answer

マークアップとスタイルをアップロードしてください。とにかく、ここにタブで動作するサンプルメニューがあります。

  .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 セレクターを使用して、要素がフォーカスされたときにトリガーします。

正確な要件を書き留めると、役立つ場合があります

css - キーボードのみを使用しているときにドロップダウン メニューにアクセスできるようにする

3 に答える 3

Related

Reference

css - キーボードのみを使用しているときにドロップダウンメニューにアクセスできるようにする