デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPressサイトにスマホ用ドロップダウンメニューを実装する方法

dropmenu_eyecatch

【更新情報】2017年6月11日 タイトル、文言、画像を追記・修正しました。
こんにちは、koheiです。
今回は、WordPressにスマホ用のドロップダウンメニューを実装する方法を紹介します。

※実装は、jQueryを使って実装しますので、WordPressにjQueryを読み込んでいない方は、まずは以下の記事を読むことをオススメします。
WordPressにjQueryを読み込む方法
スポンサーリンク

ドロップダウンメニューとは?

PCサイズで見ると、横並びのメニューになってるけど、スマホでみると「3本ラインのメニューアイコン」になっているサイトよく見ますよね。
メニューアイコンを押すと、メニューの一覧がリスト表示されます。スマホは画面サイズが小さいので、ユーザーにとって使い勝手の良いメニューだと思います。

about_dropdownmenu

実装方法

1.メニューの要素を配置

メニューの要素のHTMLを以下のように実装します。
※以下は共通ヘッダー部のテンプレートファイルである「header.php」に実装するのがよいでしょう。


ul要素「spnavi」がスマホ用ドロップダウンメニューボタンの要素です。div要素の「drop_menu_hidden」がドロップダウンメニューをクリックした時に表示されるメニューリストです。WordPressで設定したメニューを表示するには、wp_nav_menu( ‘theme_location=navigation’ )をコールします。

ちなみに、「3本ラインのメニューアイコン」は、gif画像で作りました。6パターンぐらい作ったメニューアイコン画像(30px✕30px)を無料配布しています。(以下からダウンロードできます)

2.CSSで装飾

続いてCSSを以下のように実装します。

CSSはそれぞれのサイトのデザインによって変わってくると思いますので、お好みのデザインにカスタマイズしてください。
重要なポイントは、20行目以降の処理です。PCサイトでは、スマホ用のドロップダウンを非表示にするため、ul要素「spnavi」をdisplay=noneを指定して非表示にしています。

3.jQueryでドロップダウンメニューを実装

jQueryの処理は以下のように実装します。

※WordPressにjQueryのファイルを読み込む方法は以下記事を参考にしてください。
WordPressにjQueryを読み込む方法

1行目〜19行目までは、初回表示時に実行される処理です。
4行目〜9行目は、スマホ画面サイズの時は、メニューリスト「dorp_menu_hidden」要素を非表示にし、PCサイズの時は、表示させる処理です。
実際にメニューアイコンをクリックした時に、メニューリストが表示されるアニメーション部分の処理が10行目〜15行目になります。slideDown()という関数を使って下方向にメニューリストを表示させています。

22行目〜39行目は、Windowサイズがリサイズされた時に、メニューリスト「dorp_menu_hidden」要素を表示・非表示にする処理です。

【命令解説】
slideDown([speed],[callback])
指定した要素を下方向にスライドアニメーションさせる命令です。スピードは、”slow”、”normal”、”fast”やミリ単位の数値で指定できます。

最後に

以上、WordPressにスマホ用のドロップダウンメニューを実装する方法をご紹介しました。
ぜひみなさんもドロップダウンメニュー実装にチャレンジしてみてくださいね!

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン