ウェブサイトのドロップダウンナビゲーションにキーボードサポートを追加する

Suckerfishはこれを非常にうまく行っていると知っていますが、Suckerfishのjavascriptが嫌い、jQueryを使用してこれを行う簡単な方法があるはずです。私は次のページを完成させました：ウェブサイトのドロップダウンナビゲーションにキーボードサポートを追加する

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
    <html lang="en"> 
    <head> 
    <title>Test nav page</title> 
    <style type="text/css"> 

     html {margin:0;padding:0;text-align:center;font-size:62.5%} 
     body {margin:0 auto;padding:0;width:600px;text-align:left;} 

     ul#nav {display:inline-block;width:260px;border:0;float:right;list-style:none;position:relative;} 
      ul#nav li {display:inline-block;float:left;width:130px;font-family:arial;color:#444;font-size:1.2em;font-weight:bold;text-align:center;position:relative;} 
      ul#nav li.t1, ul#nav li.t1 ul li a {background-color:#aad;} 
      ul#nav li.t2, ul#nav li.t2 ul li a {background-color:#daa;} 
       ul#nav li ul {position:absolute;left:-9999px;display:block;width:130px} 
        ul#nav li:hover ul,ul#nav li.hover ul, ul#nav li:focus ul {left:-40px;} 

       ul#nav li a {display:block;width:120px;padding:7px 5px;} 
        ul#nav li ul li a {border-top:solid 1px #ddd;font-size:0.9em;padding:7px 0;width:130px;display:inline-block} 


    </style> 
    </head> 
    <body> 
     <ul id="nav"> 
      <li class="t1"><a href="#top1" tabindex="1">Top one</a> 
      <ul> 
       <li><a href="#first" tabindex="2">First</a></li> 
       <li><a href="#second" tabindex="3">Second</a></li> 
      </ul></li> 
      <li class="t2"><a href="#top2" tabindex="4">Top two</a> 
      <ul> 
       <li><a href="#third" tabindex="5">Third</a></li> 
       <li><a href="#fourth" tabindex="6">Fourth</a></li> 
      </ul></li> 
     </ul> 
     <script type="text/javascript" src="js/jquery.min.js"></script> 
     <script type="text/javascript" > 
     $(document).ready(function(){ 
      $('ul#nav li').hover(
       function(){ 
        $(this).toggleClass('hover'); 
       }); 
// Updated with the following jQuery Function... 
      $('ul#nav li a').focus(
      function(){ 
       $(this).parent().addClass('hover'); 
     }); 
// Just need a way of closing the dropdown when the key focus moves out of the li, not the anchor... 
     }); 
     </script> 
    </body> 
    </html>

そして、それはキーボードでアクセスできないことを除いてすべて素晴らしいです。誰かが私が逃しているものを指摘できますか？それは私を困惑させている、過去2時間の間にそれをしていて、どこにもいなくなった。

乾杯、

アップデート：私は本当に近いです！フォーカスがアンカータグにある場合、親のLIに「ホバー」クラスを適用する別のjQuery関数を追加しました。私は上記のコードでそれを追加しました。これは私がリンクにタブすることを可能にし、ドロップダウンリンクを表示しますが、それを過ぎると（私もtabindexを更新しました）、それらは消えません。

出典

2011-01-25 tadywankenobi

ところで、jQueryライブラリは1.4.4です。私はそれが大きな違いをもたらすとは思っていませんが、ちょうどfyi。また、私はすべてのスクリプトとスタイリングをインラインで保って、私の計画がどんなものかを見やすくしました。乾杯... – tadywankenobi

Tは、次の

 <script type="text/javascript" > 
    $(function(){ 
     //for ie6 
     $('#nav li').hover(function(){ $(this).addClass('hover') }, function(){$(this).removeClass('hover')}); 

     $('#nav a').focus(function(){ 
     $(this).parents('li').addClass('hover'); 
     }); 

     $('#nav a').blur(function(){ 
     $(this).parents('li').removeClass('hover'); 
     }); 
    }) 
    </script>

注意してみてください：私はそれを信用していないので、私はtoggleClassを変更しました。私はあなたがクラスで何をしたいのかを指定しなければならないと思います。そうしないと、あなたが期待していない状態に陥ってしまう危険性があります。

出典

2011-01-25 17:56:44 troynt

あなた！紳士と学者です。それは今、完璧に動作します。私は同意する、私は一般的にトグルクラスのファンではない、私は日焼け止めコードのためにここでそれを使用した。私の考えは、IE6のホバー機能は私の主な関心事であったキーボード切替え機能ほど重要ではなかったということでした。あなたはこのジェダイを非常に幸せなキャンピングカーにしました！ – tadywankenobi

ウェブサイトのドロップダウンナビゲーションにキーボードサポートを追加する

答えて

関連する問題