ナビゲーションに追従するバー
2014年12月15日
メニューにマウスを合わせると、その位置までバーが移動してくるアレです。おそらく探せばライブラリ的なのが見つかると思いますが、いつものように探して楽する前に自分で考えてみます。
考え方
先ず、ナビゲーションの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がもっと楽しくなると思います。