【STINGER5】スマホ時のナビメニューをクリックしやすいタイプのものに変更

STINGERのスマホでの表示のMENU、小さくてちょっとクリックしにくいなって思いませんか？わたし、スマホで小さいボタンのクリックしようとすると疲れるんですｗ。

そこでスマホサイトのUIでよく見かけるクリックしやすいタイプのナビゲーションメニューに変えてみたのでそのご紹介です。

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

レスポンシブ対応トグル系メニュー

下図のようにスマホ表示の画面では【MENU】のナビバーをクリックすると折り畳み式のアコーディオンが開くタイプのメニューをSTINGER5に搭載していきます。

JSフォルダにあるbase.jsファイルの書き換え

まず、テーマファイルのstyle.cssと同じ階層にある【JS】というフォルダにあるbase.jsの中身を書き換えていきます。

この下記の部分を削除

/*---------------------------
ｱｺｰﾃﾞｨｵﾝ
------------------------------*/

jQuery(document).ready(function(){
  //acordion_treeを一旦非表示に
  jQuery(".acordion_tree").css("display","none");
  //triggerをクリックすると以下を実行
  jQuery(".trigger").click(function(){
    //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら
    if(jQuery("+.acordion_tree",this).css("display")=="none"){
         //classにactiveを追加
         jQuery(this).addClass("active");
         //直後のacordion_treeをスライドダウン
         jQuery("+.acordion_tree",this).slideDown("normal");
  }else{
    //classからactiveを削除
    jQuery(this).removeClass("active");
    //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ
    jQuery("+.acordion_tree",this).slideUp("normal");
  }
  });
});

/*---------------------------
ドロップダウン
------------------------------*/

jQuery(document).ready(function(){
    jQuery(".menu ul.children").hide();
    jQuery("li.page_item").hover(function() {
        jQuery("ul.children",this).slideDown("slow");
    },
    function() {
        jQuery("ul.children",this).slideUp("slow");
    });
});

そしてこれを追加します。

$(function(){
	$(".menubtn").click(function(){
		$("#menu").toggleClass('togmenu');
	});	
});

header.phpの書き換え

以下の部分を削除

<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
  <dl class="acordion">
    <dt class="trigger">
      <p><span class="op"><i class="fa fa-bars"></i>&nbsp; MENU</span></p>
    </dt>
    <dd class="acordion_tree">
      <ul>
        <?php wp_nav_menu(array('theme_location' => 'navbar'));?>
      </ul>
      <div class="clear"></div>
    </dd>
  </dl>
</nav>
<!-- /アコーディオン -->

次に下記の部分を

  <!--
メニュー
-->
  <nav class="smanone clearfix">
    <?php
$defaults = array(
	'theme_location'  => 'navbar',
);
wp_nav_menu( $defaults );
?>
  </nav>

以下に書き換え

<div id="menuarea">
  <div class="menubtn">MENU</div>
<nav id="menu" class="togmenu">
<?php wp_nav_menu(); ?>
</nav>
</div>

style.cssへの記述

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {

この部分より上に下記を記述

/*--------------------------------------
  ナビバー
--------------------------------------*/
nav#menu {
   background:#f48881;
	color:#fff;
	padding:5px;
    margin:0 -10px 20px;
}

.togmenu {
	display:none;
}

.menubtn {
	padding: 5px 10px;
	text-align: left;
	background:#f48881;
	color:#fff;	
	margin: 0 -10px;
}

nav#menu ul {
	overflow: hidden;
}

nav#menu ul li {
	list-style: none;
	width: 100%;
	text-align: center;
	border-bottom: 1px solid #fff;
	}
nav#menu ul li:first-child{
	border-top: 1px solid #fff;
}	
nav#menu ul li:last-child{
	border:none;
}
nav#menu ul li a {
	display: block;
	color : #fff;
	padding : 5px 0;
}

nav#menu ul li a:hover {
	color: #f48881;
	background-color: #ffe7e5;
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {

そしてこの2つあるうちの下の@media only screen and (min-width: 780px)より下に下記を記述

/*--------------------------------------
  780pxナビバー
--------------------------------------*/
nav#menu {
    margin:0 0 20px;
}

nav#menu ul {
	width: 100%;
	margin: 0 auto;
}

nav#menu ul li {
	float: left;
	width: auto;
	text-align: center;
	border: none;
	list-style:none;
}
nav#menu ul li:first-child{
	border: none;
}
nav#menu ul li a {
	display: block;
	color : #fff;
	padding : 5px 1em;
}

.menubtn {
	display:none;
	padding: 10px 0;
}
.togmenu {
	display:block;
}

メニューの部分すべての記述と、アコーディオンの全ての記述を削除

以上で完了です！！

まとめ

jQueryももう少し勉強したいんですけど、おチビさんが大変活発なためしばらくお預けとなりそうな感じ。ブログ書いてるだけでギリギリですｗ

それではちゅんこ@shufulifeがお送りしましたー。