TEORICO

【jQuery】クリック時に上からするっと降りてくるメニュー

【jQuery】クリック時に上からするっと降りてくるメニュー

【jQuery】クリック時に上からするっと降りてくるメニュー

クリック時に上からするっと降りてくるグローバルメニュー

クリックした時グローバルナビゲーションのサブメニューをどうするか、制作をする上で意外に迷うところです。

下層でさらに選んでもらう形にするのか、単純に縦に降りてくるアコーディオン形式のメニューにするのか、などですね。

あまりに複雑になるとユーザーに負担をかけますし、かといってむやみにメニューは削れない。

そういった時の選択肢の一つとして参考にしていただけたらと思います。

HTML

CSS

jQuery

ソースは上記の3点です。

ポイントとしては、index()メソッドを利用して何番目のセレクタなのかというのを取得するところ

そして、eq()メソッドを利用して指定するところでしょうか。

jQueryの3行目にvar click_index = $(‘.g_nav–sub’).index(this);と書いています。

ここですが、index()の引数としてthisを設定しています。

そもそも

$(‘.g_nav–sub’).on(‘click’,function(){

このようにイベントハンドラを設定しているのですが、

$(this).index(this);じゃダメなの?と思うかもしれません。

thisの中身はg_nav–subのオブジェクトを指します

今回indexで取得したい検索したいものはエレメントであってオブジェクトでは無いというところに繋がります。

ですので、thisではなくg_nav–subを指定します。

そしてeq()メソッドでのセレクタの書き方

$(‘.g_nav–submenu:eq(‘+ click_index +’)’)

このように指定しています。

そのままeq(click_index)としてしまうと文字列として扱われますので、一度シングル(もしくはダブル)クォーテーションで区切り+で連結させます。

このようにすればセレクタの中にあるメソッドの引数に対して変数を使用することが出来ます。

サンプルを準備してます。

(メニューの3と4にサブナビゲーションがあるので、そちらをクリックしていただけると動きがわかるかと)

デモ

今回使用したメソッド(わからなかったら検索!)