ロゴ
menu
HOME > ｊQuery・Javascript > ナビゲーションに追従するバー

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

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

サンプル

考え方

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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#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を振っておきます。

SyntaxHighlighterについて
1
2
3
4
5
6
7
<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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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がもっと楽しくなると思います。