jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

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

2014年12月15日
この記事は掲載から1677日経過しています。
情報が古い可能性が有りますのでご了承下さい

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

サンプル

考え方

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

[css]
#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;
}
[/css]

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

[html]
<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>
[/html]

jQuery

[js]
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);
});
});
[/js]

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

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

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

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP