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

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

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

スポンサーリンク

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

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

mibilemenu2

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');
	});	
});
MEMO

デフォルテの状態で確認しましたが、【$】のままの状態でも大丈夫でした。もしうまくアコーディオンが開かないようであれば【$】のところを【jQuery】としてみてください。

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;
}

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

以上で完了です!!

POINT

STINGER5ではスマホでの表示では、コンテンツの幅を横に10pxずつ広げて画面いっぱいに表示しているのでメニューもあわせてそのようにしています。

まとめ

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

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

Recommendこの記事もおすすめです!

Please Share!!

この記事のタイトルとURLをコピーする

記事タイトル【STINGER5】スマホ時のナビメニューをクリックしやすいタイプのものに変更
記事URLhttps://shufulife.com/mobilemenu/

お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

最新記事をお知らせします
WordPress

公開日:2014/9/15