ナビゲーションに追従するバー

メニューにマウスを合わせると、その位置までバーが移動してくるアレです。おそらく探せばライブラリ的なのが見つかると思いますが、いつものように探して楽する前に自分で考えてみます。

サンプル

考え方

先ず、ナビゲーションのAタグの幅は固定します。固定じゃなくても出来ますが、ここではとりあえず100pxで固定させます。 移動するバーはも同様に幅100pxにし、絶対位置を指定します。

#navigation{
	overflow: hidden;
}
#navigation ul li{
	width: 100px;
	float: left;
	list-style: none;
}
#navigation ul li a{
	padding: 5px;
	display: block;
	text-align: center;
	background-color: #575757;
	color: #FFFFFF;
	text-decoration: none;
	margin-right: 2px;
}
#navigation ul li a:hover{
	background-color: #9E9E9E;	
}
/* ナビゲーションの下に付くバー
 *--------------------------------------------------------*/
#navi_line{
	position: relative;
	padding-top: 3px;
}
#line{
	height: 5px;
	width: 100px;
	background-color: #000000;
	position: absolute;
}

メニューにマウスが乗った時に、そのメニューの左からの距離分だけバーを移動すれば良いって考え方です。 それを計算させるため、Aタグには連番のIDを振っておきます。

    <ul>
      <li><a href="#" id="1">MENU 1</a></li>
      <li><a href="#" id="2">MENU 2</a></li>
      <li><a href="#" id="3">MENU 3</a></li>
      <li><a href="#" id="4">MENU 4</a></li>
      <li><a href="#" id="5">MENU 5</a></li>
    </ul>

jQuery

jQuery(document).ready(function(){
//ナビゲーションのAタグにマウスオーバーしたら処理開始
  jQuery(document).on('mouseover','#navigation a',function(){
    var id  = jQuery(this).attr('id'); //idを得る 1,2,3....
    var len = (id*100)-100; //idの数値に100を掛け引いた値が左からの移動距離になる
    
    //キューされているアニメーションを削除
    //これをしないと段階的に移動してしまう
      jQuery('#line').queue([]);
      jQuery('#line').stop();
    
		jQuery('#line').animate({ //バーを指定位置までアニメーションして移動させる
			left: len
		}, 500);
  });
});

マウスが乗ったメニューのIDから距離を計算し、その分だけ左からの絶対位置をanimateで変化させるってだけの事ですね。注意したいのは、MENU1から素早くMENU5までマウスを動かした場合など、
前のアニメーションが残っているとメニュー一個分づつ移動→停止となるので、事前にキューを削除してしまいます。

メニューの幅が違う場合は、id="1" に移動させたい距離の数値を入れてしまうって手が楽かもです。この場合は計算すら要りません。ただ、バーの長さも可変しないと微妙かも。これの発展系として、id="menu1" などとし、menu1の場合の移動距離と、別枠などに説明文を表示させたり、メニューに応じて画像をスライドさせたりなども楽しいと思います。

楽してライブラリを探すより、シンプルな状態から発展させていくと、jQueryがもっと楽しくなると思います。