vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

[Stinger5] スマホレイアウトのナビメニューをカスタマイズしてみよう

      2017/02/01

LINEで送る
Pocket

wp-stinger5-s-menu-0
こんにちは、okutani(@okutani_t)です。Stinger5のスマートフォンレイアウトのナビメニューは、すこし小さくて押しにくいです。今回、このナビメニューをサイト上部にメニューバーとして配置してみました。

下記サイトを参考にして設定を行ったので、合わせてご覧ください。また、本記事では参考サイトと違い、PCサイトのナビメニューは変更せず、デフォルトのまま使用しています。

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

では、実際に設定を行っていきましょう。

スポンサーリンク

.js、.php、.cssにメニューを変更するコードを記述

設定項目が多いですが、ほぼコピペで済みますので、身構えずに一つ一つ進めてみてください。

base.jsに設定を記述

「base.js」の下記コードを丸ごと削除しましょう。ちなみに子テーマを利用している場合でも、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');    
    });
});

base.jsファイルの設定は以上です。

header.phpにメニューを配置

「header.php」から、デフォルトのナビメニューを削除し、新たにナビメニューを配置します。子テーマを使っている方は子テーマにheader.phpを移動させて記述していきましょう。まずは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>
<!-- /アコーディオン -->

次に<div id=”wrapper”>のすぐ下に下記コードを記述します。

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

これでheader.phpの設定は完了です。

style.cssにスタイルを記述

子テーマの「style.css」に下記を追記します。

@media only screen and (max-width: 780px) {
    nav#menu {
     background-color: #151515;
     color:#fff;
     padding: 5px 5px 0;
     margin-bottom: 20px;
    }
    .togmenu {
     display:none;
    }
    .menubtn {
     padding: 5px 10px;
     text-align: right;
     background-color: #151515;
     color:#fff;
     margin: 0 -10px;
     font-size: 15px;
    }
    nav#menu ul {
     overflow: hidden;
    }
    nav#menu ul li {
     width: 100%;
     list-style: none;
     text-align: center;
     border-bottom: 1px solid #fff;
    padding: 0;
    }
    nav#menu ul li:first-child{
     border-top: 1px solid #fff;
    }
    nav#menu ul li:last-child{
     border:none;
    }
    nav#menu ul li a {
     width: 100%;
     display: block;
     color : #fff;
     padding : 10px 0;
    }
    nav#menu ul li a:hover {
     color: #f48881;
     background-color: #333;
    }
}

私は別のスタイルでPC用のナビメニューのレイアウトを行っていたため、上記コードにはその調整の記述が含まれています。

不要な記述があるかもしれませんので、レイアウトが崩れてしまう場合は冒頭に載せた参考サイトの方を参考にしてみてください。

メニューの設置を確認

CSSの記述が完了したら、スマートフォンからサイトを確認してみましょう。

wp-stinger5-s-menu2

上の「MENU」ボタンを押すと、ナビメニューが下にドロップダウンして表示されるようになりました。

おまけ:開閉時にアニメーションをつける

このままだとMENUボタンを押す度に、メニューが表示非表示を繰り返すだけなので、開閉時にちょっとオシャレなアニメーションをつけてみます。以下のサイトを参考にしました。

参考[備忘録]jQueryで開閉式のメニューを作りたいなら、slideToggle()やtoggleClass()を使うとめっちゃ楽! | ultimate-ez.com

base.jsに記述した下記のコードを、次のように変更します。

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

↓

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

これでメニュー開閉にアニメーションがつきました。お好みで設定してみてください。

まとめ

押しにくかったデフォルトのメニューボタンを、スマホ上部にバーとして配置できました。

base.jsにslideToggleを記述することで、開閉にアニメーションをつけて気持ちオシャレになりましたね。

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

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
メニューの位置は今回上部に配置しましたが、好きな場所に設置できるので是非チャレンジしてみてください。fontawesomeでアイコンをつければ、更にオシャレになってオススメです。

 - Stinger5

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[Stinger5] スマホのブログタイトルを画像に変更する

こんにちは、okutani(@okutani_t)です。WordPressのテー …

Stinger5にiPhone用のアイコンを設置する

こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面 …

Stinger5にファビコンを設置する方法

こんにちは、okutani(@okutani_t)です。本記事ではWordPre …

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイ …

Pocketボタンをサイトに設置してみよう!Stinger5編

こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェ …

[Stinger5] デフォルトのツイートボタンからブログ名を含めて投稿する

こんにちは、okutani(@okutani_t)です。Stinger5では初め …

Simplicity,Stinger5で超簡単にアイコンを使う方法

こんにちは、okutani(@okutani_t)です。あ、もう一度言いますね。 …

Stinger5の導入&子テーマの作成方法

こんにちは、okutani(@okutani_t)です。WordPressはブロ …

[Stinger5] 固定ページにSNSシェアボタンを追加する

こんにちは、okutani(@okutani_t)です。私はWordPressテ …

Stinger5で文字色が変更できない!テーマカスタマイザーの削除で解決しました

こんにちは、okutani(@okutani_t)です。先日、Stinger5で …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。