STINGERのスマホでの表示のMENU、小さくてちょっとクリックしにくいなって思いませんか?わたし、スマホで小さいボタンのクリックしようとすると疲れるんですw。
そこでスマホサイトの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'); }); });
デフォルテの状態で確認しましたが、【$】のままの状態でも大丈夫でした。もしうまくアコーディオンが開かないようであれば【$】のところを【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> 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; }
メニューの部分すべての記述と、アコーディオンの全ての記述を削除
以上で完了です!!
STINGER5ではスマホでの表示では、コンテンツの幅を横に10pxずつ広げて画面いっぱいに表示しているのでメニューもあわせてそのようにしています。
まとめ
jQueryももう少し勉強したいんですけど、おチビさんが大変活発なためしばらくお預けとなりそうな感じ。ブログ書いてるだけでギリギリですw
それではちゅんこ@shufulifeがお送りしましたー。
3 件のコメント
とても分かりやすい説明の書き方で本当に参考になります。
ひとつ質問をさせて頂いてもよろしいでしょうか?
スマホの表示の際にメニューがセンターにならないのです。。。
要素の検証では確かにcenterが生きているのに、表示上では実機で
見本のようにセンターにはなりません。
また左にはグレーのドットが表示されております。
子テーマを作成しそのcssに親テーマを読み込んだあとに
/*————————————–
ナビバー
————————————–*/
nav#menu {
と記載を始め
記述を終えたあと
@media only screen and (min-width: 780px)
{
/*————————————–
780pxナビバー
————————————–*/
nav#menu {
と記載をしております。
現在まだ子テーマではメニューのcssしか記述していない状態です。
もしご教授頂けましたら幸いです。
こちらのページの通りしたらPCのメニューの色も変わっております。
これらの挙動は正しいでしょうか。
本来PCの表示は変わる予定はない説明ページだったでしょうか。
お手すきの時にでも宜しくお願いいたします。
きりん様
コメントいただいたのに申し訳ないのですが、それだけでは何とも分かりません。
子テーマでしたら、親要素のcssの#menuなどのid名がかぶっている所があり、その部分が反映しているのでは?
お役にたてずすみません。