2014
11
07

ulリスト + jQueryで作る、開閉するアコーディオンメニュー

連動開閉するアコーディオンメニューというものを作ったので、自分の備忘録として。ページ遷移時に該当部分は開いておく機能(WPの条件分岐にて)もおまけで。


デモ

三角のアイコン部分が開閉します。閉じている時は右向き、開いている時は下向きになります。他を開くと今開いていた所は一緒に閉じます。

参考サイト

こちらを参考にさせていただきました。ありがとうございます!

三角アイコン素材

右向き三角 下向き三角

デモで使ってる画像です。よかったらお使い下さい。簡単な画像ですのでどこにでも使っていただいて構いません。スマホ対応のため、CSSで1/2サイズで表示します。

コード

html

css

マウスホバーしたときに下線が出るようにしています。aタグだけでなく開閉部分のホバーにも下線が出たほうが「押せる」感があるかなと思って.overというクラスを作っています。(21行目)

p:hoverでいけると思ってたらIEでバージョンによってぐぬぬ…!クラス作ってjQuery側で付与してあげる形にしました。

jQuery

WPでない場合は2行目と20行目は必要ありません。

3~8行までが前述の開閉部分のマウスホバー・アウトで.overというクラスを付けたり消したりしてるところ。

9から19行目がクリック時に開閉するところ。詳しくはコメントアウトに解説を書いておきました。

WordPressでページ遷移時に該当部分を開いておく

141107-1

デフォルトだと全部閉じていますが、このようにページ遷移した時にカレントのあるところは開いておきたい、という内容。

WPじゃない場合も頑張れば出来そうですが、今回自分で実装したのがWPだったのでメモがてら。固定ページの条件分岐を使います。リスト1, 2, 3…のリンク先が、それぞれ p1, p2, p3… というスラッグの固定ページだとします。

php

長くなるのでリスト5以降は省略。

まず1行目で$adという変数に class="current"という文字列(頭に空白有)を入れておいて、各リスト部分でis_page('スラッグ名')の判別を行い、該当のページなら$adを出力することで、カレント表示させます。

全部にecho ' class="current"';って書いてもいいんですけどちょっとでも短くなるかなーと思って(;´Д`)

そして、6行目で該当のサブリストのページを全て指定して、これに含まれる場合は

.openをつけたspanにしておいて、それ意外は

.openの無いspanと、ulに.hideというクラスがついたもの。

条件によって、このどちらかが出力されるようにしておきます。

css

先ほど書いたcssでは、

と、サブリストは特に指定無しで全て非表示になっていたところを、

.hideというクラスがついたところを非表示にする、というふうに分けておきます。

こうすれば、phpによって出し分けされたhtmlで、あらかじめ非表示にしておくところ、そうでないところを指定することができる、という感じです。

いかがでしたでしょうか。どなたかの参考になれたら幸いですー!

このメニューを使ったこんな記事も書きました。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2014/11/07


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top