jqueryを使ったスマホでよく使うアコーディオン型ナビゲーションの作り方

-
カテゴリー:
javascript 

所得税めっちゃもってかれたぁーーーー!
かなり久々の更新となってしまいました。(汗)

今日は、jqueryを使ったスマホでよく使うアコーディオン型ナビゲーションの作り方をご紹介したいと思います。

スマホ用のサイトですとよくフッター辺りに使われているのを目にします。

このアコーディオン型のナビゲーションのメリットは、項目などが多い場合、アコーディオン型のナビゲーションを使うことで、非常にコンパクトにまとめられる点にあります。

 

では、早速その作り方なのですが、jqueryが読み込まれていることを前提に、htmlは以下のようにコーディングを行います。

 

dtで囲まれている部分がアコーディオンをスライド開閉させる際のボタンの役割を果たします。
※今回はdl、dt、ddで構成しましたが、これは個人的な好みなので、コードの変更は適応行ってください。

続いてcssを記述します。

 

右端に画像で矢印をつけるためにdtに:afterを指定し、画像を配置しています。
ちなみに背景画像で指定する方がコードは短くできると思います。が、:after使いたくなったので、上記の記述しました(汗)

最後にjavascriptの記述です。

ここはかなりシンプルなんですが、dtがクリック(タップ)されたら処理を実行させています。
ちなみにtoggleClassでナビゲーションが開いた際にdtにactiveクラスを付与し、矢印の画像を変更し、ナビゲーションが閉じれば、元に戻ります。
next().slideToggleでクリックされたdtの次の要素にあたるddがスライドし、開きます。

HTMLの構成が変わった場合は、ある程度工夫は必要なのですが、非常に簡易的に実装はできますね。

それでは、この辺に失礼しますm(。。)m
サンプルはコチラ