WordPress

WordPressにjQueryでアコーディオンメニューを追加する

Accordion

WordPressのヘッダーメニューを、スマホとPCで別々にデザインしました。

作り方を忘れないように、備忘録としてメモしておきます。

ヘッダーメニューのデザイン

PC版(768px以上)

一般的なシンプルなヘッダーメニュー。
項目は6つまで追加できる。

ヘッダーメニュー,PC

スマホ版(768px未満)

スマホではアコーディオンメニューに表示が切り替わる。
MENUをタップすると開閉する。

ヘッダーメニュー,スマホ,非表示

アコーディオンメニューを開いたイメージ。
jQueryのslideToggleを使って項目の表示と非表示を切り替えている。

ヘッダーメニュー,スマホ,表示

ヘッダーメニューのデザイン

スマホ用のメニューバーを作る

header.phpのヘッダーメニューに関するコードの下に、メニューバーに関するコードを追加します。
<div>で囲ってidをつけておきます。

style.cssに、スマホでのみ表示されるようにメディアクエリを書きます。
僕はSassで書いているので、CSSで書いている方は各自で読み替えてください。

includeを使って、下のmixinを呼び出しています。
768px以上でdisplay: noneが有効になるため、PCではメニューバーが非表示になります。

項目の表示切り替え

メニューの項目はメニューバーがクリックされるまでは非表示にしておきます。
ただし、PCでは最初から表示するようにメディアクエリで分けます。

項目部分のデザイン

項目部分をデザインしていきます。
スマホ用の記述をしたあとに、includeで768pxを超えたときの記述をしています。

myImg
Yuta

li要素が768px以上になるとdisplay: inline-blockが適用されるので、横並びに切り替わります。

jQueryでタップしたら開閉する処理を作る

Accordion

メニューバーをタップ(クリック)すると、メニューの項目に対してslideToggleが実行されます。

myImg
Yuta

WordPressではjQueryを省略して$で記述すると動かない点に注意しましょう。