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

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

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

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

実装方法

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

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

<!-- スマホ用メニュー表示 -->
<ul id="spnavi">
 <li id="drop_menu_icon">
  <img src="<?php echo get_template_directory_uri();?>/images/menu_icon.gif" width="30" height="30" alt="">
 </li>
 <li id="drop_menu_text">
メニュー
 </li>
</ul>
<div id="dorp_menu_hidden">
 <?php wp_nav_menu( 'theme_location=navigation' ); ?>
</div>

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

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

ドロップダウン用メニューアイコン画像

1 file(s)   2.01 KB

Download

2.CSSで装飾

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

/* スマホ用ナビゲーションラベル */
#spnavi::after {
  content: "";
  display: block;
  clear: both;
}

#drop_menu_icon {
  width: 35px;
  padding-top: 15px;
  float: left;
}
#drop_menu_text {
  width: 70px;
  padding-top: 20px;
  float: left;
  color: #fff;
}

@media only screen and (min-width:769px){
  /* PCサイトでは、スマホ用ドロップダウンメニュー非表示 */
  #spnavi {
    display: none;
  }
}

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

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

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

/* ---------初回表示制御--------- */
jQuery(function(){
  /* ドロップダウンメニュー */
  if (window.matchMedia('(min-width:769px)').matches) {
    jQuery("#dorp_menu_hidden").show();
  }
  else {
    jQuery("#dorp_menu_hidden").hide();
  }
  jQuery("#spnavi li").click(function(){
    if(jQuery("#dorp_menu_hidden").is(":hidden")){
      jQuery("#dorp_menu_hidden:not(:animated)").slideDown("fast");
    }
    else{
      jQuery("#dorp_menu_hidden:not(:animated)").slideUp("fast");
    }
  });

});

/* ---------Windowがリサイズされた時の制御--------- */
var timer = false;
jQuery(window).resize(function() {
  if(timer != false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    if (window.matchMedia('(min-width:769px)').matches) {
      /* PCサイトサイズになったら、ナビメニュー表示 */
      jQuery("#dorp_menu_hidden").show();
    }
    else{
      /* スマホサイズになったら、ナビメニューは隠す（ドロップダウンメニュー） */
      jQuery("#dorp_menu_hidden").hide();
    }

  }, 200);

});

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

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

最後に

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

それでは！