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

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

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

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

サンプル

考え方

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

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

jQuery

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

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

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

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

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

PAGE TOP