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

 2014/09/15

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ずつ広げて画面いっぱいに表示しているのでメニューもあわせてそのようにしています。

以下参考にさせていただいたサイトです。

レスポンシブWebデザインで折りたたみメニューに切り替える

デザインセンスのない僕がブログでさりげなく使っているCSSまとめ

まとめ

WordPressのGUSHのスマホ時のメニューが使いやすいなーと思ってSTINGER5もこのタイプのメニューに変えてみました。

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

それでもなんとか100日チャレンジ12日目。あと88日頑張ります。それではちゅんこ@shufulifeがお送りしましたー。

STNGER5

Please comment!

  

2件のコメント

  • きりん 2015年9月14日 16:40

    とても分かりやすい説明の書き方で本当に参考になります。
    ひとつ質問をさせて頂いてもよろしいでしょうか?

    スマホの表示の際にメニューがセンターにならないのです。。。
    要素の検証では確かにcenterが生きているのに、表示上では実機で
    見本のようにセンターにはなりません。
    また左にはグレーのドットが表示されております。

    子テーマを作成しそのcssに親テーマを読み込んだあとに
    /*————————————–
    ナビバー
    ————————————–*/
    nav#menu {

    と記載を始め

    記述を終えたあと

    @media only screen and (min-width: 780px)
    {
    /*————————————–
    780pxナビバー
    ————————————–*/
    nav#menu {

    と記載をしております。

    現在まだ子テーマではメニューのcssしか記述していない状態です。
    もしご教授頂けましたら幸いです。

    こちらのページの通りしたらPCのメニューの色も変わっております。
    これらの挙動は正しいでしょうか。

    本来PCの表示は変わる予定はない説明ページだったでしょうか。

    お手すきの時にでも宜しくお願いいたします。

    • ちゅんこ 2015年9月14日 17:14

      きりん様
      コメントいただいたのに申し訳ないのですが、それだけでは何とも分かりません。
      子テーマでしたら、親要素のcssの#menuなどのid名がかぶっている所があり、その部分が反映しているのでは?

      お役にたてずすみません。

Messege




現在トラックバックはありません。