jQueryを利用したナビゲーションメニュー

• フォーカス時に動作を加え、フォーカスが当たっていることをわかりやすくする。
• DEMO PAGE

• マウスフォーカス時に、メニューが動く。
• マウスフォーカス時に画像を変更する。

<div id="subNaviWrapper">
<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">HowToBuy</a></li>
 <li><a href="#">RSS</a></li>
 <li><a href="#">Sitemap</a></li>
</ul>
</div>

/* ●naviデザインサンプル */
#subNaviWrapper{
 width: 150px;
 font-size: 20px;
}
#subNaviWrapper li{
 background: url('../img/16dotBlue.png') no-repeat 0 3px;
 padding: 0 0 0 20px;
 margin: 0 0 10px 0;
}
a{
 text-decoration: none;
 color: #444444;
}

$(document).ready(function(){
  /* ◯各々のメニューにフォーカス時 */
  $('#subNaviWrapper li').mouseover(function(){
   $(this).css("background", "url('img/16dotRed.png') no-repeat 0 3px");
   $(this).animate({paddingLeft:'+=10'},300);
  });

  /* ◯各々のメニューにフォーカスアウト時 */
  $('#subNaviWrapper li').mouseout(function(){
   $(this).css("background", "url('img/16dotBlue.png') no-repeat 0 3px");
   $(this).animate({paddingLeft:'-=10'},300);
   
  });
 });