0

メニューを作成しましたが、メニューにキーボード機能を追加したいと考えています。メニューがフォーカスされているときに、 を押してメニューを表示できるようにしたいと思いenterます。次に、 を押しTabてメニュー項目を選択できます。ESC次に、メニュー項目を非表示にするために押したいと思います。

CSS を変更するにはどうすればよいですか?

HTML

<ul class="hMenu">
  <li><a href="">prod1</a>
    <div>
      <a href="">test1</a>
      <a href="">test2</a>
      <a href="">test3</a>                  
    </div>
  </li>
  <li><a href="javascript:void(0);" >prod2</a>
    <div>
      <a href="">test4</a>  
      <a href="">test5</a>                  
    </div>
  </li>  
</ul>

CSS

ul.hMenu li:hover a {
  color:red;
}           
ul.hMenu  { 
  margin: 0;
  padding: 0; 
  z-index: 1;               
}
ul.hMenu li  {  
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  width:140px;
}
ul.hMenu li a { 
  display: block; 
  text-align: left;
  text-decoration: none
}          
ul.hMenu li div  {                    
  position: absolute;               
  display: none;                
}
ul.hMenu div a {
  background: yellow;     
}
ul.hMenu li :hover   {
  background: yellow
}
/**Mouse hover the menus can show up**/
ul.hMenu li:hover div{          
  display:block;
}
4

1 に答える 1

0

私はあなたを正しい方向に導く解決策を考え出しました.

CSS は、入力された特定のキーに関係するイベントを処理できません。この問題を解決するには、javascript (この場合は jQuery) を使用する必要があります。

関数は、このkeypress状況で探しているものです。

タブ移動機能の実行方法はわかりませんが、EnterおよびESC機能は動作しました

ここにjQueryがあります

$('document').ready(function () {
    var menu = $(".hMenu");
    menu.hide()
    $("body").on("keypress", function (e) {
        if (e.keyCode === 13) { //Key Code for Enter
            menu.fadeIn();
        }
        if (e.keyCode === 27) { //Key Code for ESC
            menu.fadeOut();
        }
        if (e.keyCode === 9) { //Key Code for Tab
            //Tabbing function here
        }
    });
});

フィドル

これにより、それぞれのキーを押すと、効果的にメニューがフェードインおよびフェードアウトします。

于 2013-07-09T04:41:53.373 に答える