Twenty Eleven スマホ用ドロップダウンメニューの実装方法

Twenty Eleven
スポンサーリンク

昨日の記事「Twenty Eleven ナビゲーションメニューの編集&アイコンの追加方法」で「近日中にスマホ用メニューも作ります」と宣言した勢いでカスタマイズに手をつけたところ、意外とすぐにできたので備忘録的に書いておきます。(だからさっさとやれとあれほど)

完成図

今回は三本線のアイコンとMENUの文字を押したらメニューが下にニョキッと出てくるスマホ用のドロップダウンメニューを作ります。

dropdown

jsのコードはクマホーブログさんを、三本線のCSSはWebparkさんを参考にしました。ありがとうございました!

header.phpの変更

メニューを表示したい場所に下記コードを追記します。私はヘッダーイメージの上(サイトの一番上)に表示したかったので、<header id=”#branding” role=”banner”>の直後に書きました。

<?php if(is_mobile()) : ?>
	<nav id="access" role="navigation">
		<p class="navtitle"><span class="nav-btn-ico"></span>MENU</p>
		<?php wp_nav_menu( array(
			'theme_location' => 'primary',
			'items_wrap' => '<ul>%3$s</ul>',
			'container_class' => 'menu'
		 ) ); ?>
	</nav><!-- #access -->
<?php endif; ?>

<p class=””navtitle>〜</p>の部分が元々表示される「MENU」という文字部分、<span=”nav-btn-ico”></span>部分が三本線のアイコンです。

<?php wp_nav_menu 〜 ?>は「MENU」をタップすると表示されるメニュー部分です。wp_nav_menuで出力したhtmlはたくさんクラス名がついてうざったいので、後で作成するjsに合わせて’container_class’でdivのクラスが「menu」になるようにしています。

もっと細かい設定は10251.netさんや、公式ページを確認してみてください。便利なことがいろいろできるようです。(わかってない)

<?php if(is_mobile()) : ?>の記載について

後述のjsファイル内で650pxを境に表示/非表示を切り替える設定がしてあるのですが、上手く動かなかったのでphpでモバイルのみ表示されるように条件分岐をしています。これは私の理解が違うのかもしれませんので、間違いがあればご指摘いただけると嬉しいですm(._.)m

jsファイルの作成

メニューをニョキッとさせるためのjsファイルを作ります。クマホーブログさんではslideDown/slideUpのスピードがfastになっていましたが、今回はnormalに変更しました。4行目のdiv.menuや8行目の(“p.navtitle”)がhtmlと合致しないと動かないようなので、任意のクラス名にした方は変更してください。

jQuery(document).ready(function($){

	var agent = navigator.userAgent;
	var list = jQuery("div.menu");

	function menuslide(){
	//メニュー表示非表示
	jQuery("p.navtitle").click(function(){
	if(jQuery(list).css("display")=="none"){
		jQuery(list).slideDown("normal");
	}else{
		jQuery(list).slideUp("normal");
	}
    });
    }

    if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1){
        menuslide();

    }else if(agent.search(/Android/) != -1){
        menuslide();

	}else{
		var replaceWidth = 650;
		function widthSize(){
			var windowWidth = parseInt(jQuery(window).width());
			if(windowWidth >= replaceWidth) {
				jQuery(list).css("display","block");
			} else if(windowWidth < replaceWidth) {
				jQuery(list).css("display","none");
			}
		}
		jQuery(window).resize(function(){widthSize();});
			widthSize();
			menuslide();
  }
});

これを使用テーマ(子テーマなら子テーマ)のjsフォルダ(なければ作成)にnavtool.jsとして保存します。

スポンサーリンク

jsファイルの読み込み

次にクマホーブログさんが紹介していたコード、

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/navtool.js" type="text/javascript"></script>

をヘッダーのwp_head(); の下に書き込んだのですが、jsファイルが読み込めず常にメニュー部分が表示される状況になってしまいました。困った。。

が、WordPress+jQuery+動かない…のキーワードでいろいろ検索してみたところ、WebDesignRecipeさんの「WordPressでjQueryが動かないという人へ」を読んでいて見つけた「wp_enqueue_script関数」を使って解決できました!WebDesignRecipeさんがなければ私本当に何もできていないと思うぐらい、活用させてもらっています。

このコードをheader.php内のwp_head();の下に書き込んでください。</head>の閉じタグの直前です。’navtool’のところはjsファイル名と同じになるので、ファイル名を変えた方はこちらも変更してください。

<?php wp_enqueue_script('navtool', get_bloginfo('stylesheet_directory').'/js/navtool.js',array(jquery)) ; ?>

これでとりあえずメニューの表示/非表示ができるようになります。

CSSで装飾

まずメディアクエリが始まる部分、

/*Responsive Structure
----------------------------------------------- */

の下に下記コードを追記します。

@media screen and (min-width: 650px) {
p.navtitle {
  display: none;
}
}

これで650px以上のデバイスだと「MENU」が表示されなくなると思うのですが、効かなかったので先述したとおり、is_mobile関数で条件分岐をしています。なんでだろう…。

その後、650pxで表示を切り替えているところ、

@media (max-width: 650px) {
	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */

の下にMENUの文字部分、クリック後に表示されるメニュー部分のCSSを追記していきます。

#access p.navtitle {
    font-size: 12px;
    font-weight: bold;
    padding: 10px;
    text-align: right;
    margin-bottom: 0;
  }
  #access div.menu {
    margin: 0;
    padding: 3px;
    display: none;
  }
  #access div.menu ul {
    float: left;
    text-align: center;
    margin-left: 3px;
  }
  #access div.menu ul li {
    width: auto;
    display: inline-block;
    line-height: 1.4;
    margin: 3px;
    background: #fff;
  }
  #access div.menu ul li a {
    font-size: 10px;
    padding: 0 1em;
  }

パソコンの表示では8個の項目が均等幅で表示されるように#access ul li にwidth: 12.5%を指定していますが、スマホでは文字数に沿った幅になるようにwidth: autoを指定しています

最後に<span class=”nav-btn-ico”>で囲った三本線アイコン部分の装飾をします。.nav-btn-icoのmarginを変更するとアイコンの位置が変わりますし、width/heightを変更するとアイコン幅と線の太さが変わります。

.nav-btn-ico {
    display: inline-block;
    position:relative;
    margin: 0 10px 3px 0;
    padding: 0;
    background: #33cccc;
  }
  .nav-btn-ico, .nav-btn-ico:before, .nav-btn-ico:after {
    width: 14px;
    height: 3px;
  }
  .nav-btn-ico:before, .nav-btn-ico:after {
    display: block;
    content: "";
    position:absolute;
    top: 50%;
    left: 0;
    background: #33cccc;
  }
  .nav-btn-ico:before {
    margin-top: -8px;
    }
  .nav-btn-ico:after {
    margin-top: 4px;
  }

これで完成!スマホでもスッキリとメニュー表示ができるようになりました(^_^)v

まとめ

わからなくてもとりあえず手を動かしてみるのが大事ですね。カスタマイズがますます楽しくなってきましたー(∩´∀`)∩ワーイ

ではRyo@nydewebdesignでしたー!

Twenty Eleven
スポンサーリンク
Ryoをフォローする
ブログの中の人
Ryo

海外育児情報ポータルサイト「セカイクジ」、オンラインサロン「NYおやこサロン」など運営。育児を楽しみながら面白いこともやっていきたいバーチャル起業家。Sandbox代表。アメリカはNJで2人の男子を育児中。

Ryoをフォローする
うぇぶ母@NY