WP（ワードプレス）でslideout.jsを使用したときのスマホ用のメニュー実装の備忘録

スマホサイトってもう当たり前のように作成してますけど、意外とメニューまわりってどういったJS使うのかとか決まったなかったりするんですよね。
私自身もいろんなJSを実装してスマホ用メニューを作成するんですけど、今回の方法が割と気に入っているので
備忘録としてブログに残しておこうと思います。

たぶんコピペだけで実装できるはず！たぶん笑

では早速。

HTML

HTMLは以下のように記載します。
私の場合はWPに記載するときにheaderに記載します。（大体の方はそうだと思いますが）

今回はPC用とSP用のメニューを完全にわけて作成します。（PCのナビゲーションをスマホに引用しません）
またスマホ用のメニューについてはWPで作成します。
作成方法としては以下です。

①管理画面にログインする
②サイドメニューより「外観」＞「カスタマイズ」を選択する
③左メニューにある「メニュー」を選択し、「メニュー新規作成」を選択する
④メニュー名（任意）を入力する（今回は『spNavi』としています）
⑤次へのボタンをクリックし、「項目を追加+」ボタンをクリック
⑥固定ページや投稿から「プラスボタン」が付いている項目をクリックしてスマホ用メニューを作成
⑦階層がある場合は、選択済みの子ページをすこし右にずらせば階層を作成可能
⑧最後に公開ボタンを押して完了

<header>
  <h1 class="logo"><a href="<?php echo home_url(); ?>"><?php get_template_part( 'h_logo' ); ?></a></h1>
  <!--.logo-->

<!--PC用のナビゲーション-->
  <nav class="gnav">
    <ul class="flexbox fw">
      <li><a href="<?php echo home_url(); ?>/test1">PC用メニュー1</a></li>
      <li><a href="<?php echo home_url(); ?>/test2">PC用メニュー2</a></li>
      <li><a href="<?php echo home_url(); ?>/test3">PC用メニュー3</a></li>
    </ul>
  </nav>
  <!--.gnav-->

<!--SP用のナビゲーション開くためのボタン-->
<button class="sp iconMenu"><span class="humburger"></span></button>
<!--SP用のナビゲーション-->
<?php
wp_nav_menu(array(
	theme_location'	=> $spNavi,
	'container'		=> 'nav',
	'container_id'		=> 'menu',
	'container_class'	=> 'sp',
	'menu'			=> $spNavi,
	'depth'			=> 0,
));
?>
</header>

<main id="mainContent"> //これ重要！フッターにも閉じタグかいてね！</body></html>の直前です。

スマホ用のメニューは上記のようにWPで指定してしまいます。
theme_location’ => $spNaviのところは「スマホ用のメニュー」をWPで作成したときのメニュー名を設定してください。
IDやクラスも任意なので好きな名前を付けていただいてOKですが、下記のcssも修正してくださいね笑

ちなみに上記のようなWPの指示をだすとHTMLは以下のように吐き出されます。

<nav id="menu" class="sp">
<ul id="menu-spnavi" class="menu">
<li id="menu-item-10511" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-10511"><a href="URL" aria-current="page">SP用メニュー1</a></li>
<li id="menu-item-10512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-10512"><a href="URL">SP用メニュー2</a></li>
<li id="menu-item-10519" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10519"><a href="URL">SP用メニュー3</a></li>
<li id="menu-item-10520" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10520"><a href="URL">SP用メニュー4</a></li>
</ul>
</nav>

CSS

SCSSで先に変数設定を行います。

$siteColor:#039e3e;
$subColor:#0d25c2;

$set-prefix: '' , -moz- , -webkit- , -ms- , -o-;
@mixin PropertySetPrefix($name, $value) {
    @each $prefix in $set-prefix {
        #{$prefix}#{$name}: $value;
    }
}
@mixin ValueSetPrefix($name, $value) {
    @each $prefix in $set-prefix {
        #{$name}: #{$prefix}$value;
    }
}


.pc {
	display: block;
	@media screen and (min-width: 800px) {
		display: none;
	}
}

.sp {
	display: none;
	@media screen and (max-width: 800px) {
		display: block;
	}
}
/*===================================================================================

スマホ用メニュー

===================================================================================*/

@media screen and (max-width: 800px) {
.slideout-menu {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 300px;
		min-height: 100vh;
		overflow-y: scroll;
		z-index: 0;
		padding-bottom: 100px;
		margin-top: 60px;
		right: 0;
		//@include PropertySetPrefix(transition, all 0.2s ease-in-out );
		display: block;
		transform: translateX(100%);
		@media screen and (max-width: 414px) {
			min-height: inherit;
		}
	}
	.slideout-panel {
		position: relative;
		z-index: 1;
		will-change: transform;
		min-height: 100vh;
	}
	
	.humburger {
		position: relative;
		display: block;
		width: 100%;
		height: 2px;
		@include PropertySetPrefix(transition, all 0.2s ease-in-out );
		background-color: #ffffff;
		&:before, &:after {
			content: "";
			width: 100%;
			height: 2px;
			display: block;
			background-color: #ffffff;
			position: absolute;
			@include PropertySetPrefix(transition, all 0.2s ease-in-out );
		}
		&:before {
			top: -10px;
			left: 0;
		}
		&:after {
			left: 0;
			top: 10px;
		}
	}
	/* icon opened */
	.slideout-open{
		.humburger {
			background-color: transparent;
			&:before,
			&:after{
				top: 0;
			}
			&:before{
				@include PropertySetPrefix(transform, rotate(45deg) );
			}
			&:after{
				@include PropertySetPrefix(transform, rotate(-45deg) );
			}
		}
		.slideout-menu {
			transform: translateX(0px);
		}
	}
	.slideout-open,
	.slideout-open body,
	.slideout-open .slideout-panel {
		overflow: hidden;
		//transform: translateX(0px)!important;
	}
	.slideout-open .slideout-menu {
		@include PropertySetPrefix(box-shadow, -1vh 0 5vh 1vh rgba(255,255,255,0.05) );
	}

	
.iconMenu {
	display: block;
	width: 60px;
	height: 60px;
	padding: 12px;
	@include PropertySetPrefix(transition, all 0.2s ease-in-out );
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	border: 0;
	outline: 0;
	border-left: 1px solid rgba(#ffffff,.25);
	background: $siteColor;
}

.slideout-open{
	.humburger {
		background-color: transparent;
		&:before,
		&:after{
			top: 0;
		}
		&:before{
			@include PropertySetPrefix(transform, rotate(45deg) );
		}
		&:after{
			@include PropertySetPrefix(transform, rotate(-45deg) );
		}
	}
	.slideout-menu {
		transform: translateX(0px);
	}
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
	overflow: hidden;
}
.slideout-open .slideout-menu {
	@include PropertySetPrefix(box-shadow, -1vh 0 5vh 1vh rgba(255,255,255,0.05) );
}

#menu {
	background: #ffffff;
	ul {
		li {
			width: 100%;
			text-align: center;
			position: relative;
			font-size: 15px;
			letter-spacing: normal;
			a {
				width: calc(100% - 20px);
				text-decoration: none;
				color: #000;
				font-size: 13px;
				position: relative;
				padding: 10px;
				border-bottom: 1px solid #ddd;
				font-weight: 700;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				&:after {
					content: "";
					width: 3px;
					height: 0;
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					background: linear-gradient(to bottom, $siteColor, #4CAF50);
				}
			}
			&.current_menu_item,
			&.current_page_item,
			&.current-page-parent {
				& > a {
					background-color: rgba($siteColor,.1);
				}
			}
			ul{
				padding-left: 1em;
				li{
					a{
						font-weight: 400;
						&:before{
							font-family: "Font Awesome 5 Free";
							content: "\f054";
							font-weight: 900;
							z-index: 2;
							font-size: 11px;
							color: #333;
							margin-right: .8em;
						}
						&.current_menu_item,
						&.current_page_item,
						&.current-page-parent {
							& > a {
								background-color: rgba($siteColor,.1);
							}
						}
					}
				}
			}
			.sub-menu{
				li{
					&.current_menu_item,
					&.current_page_item,
					&.current-page-parent {
						& > a {
							background-color: rgba($siteColor,.1);
						}
					}
				}
			}
		}
	}
}
}

slideout.js

slideout.jsをCDNで読み込ませる。
閉じタグのbody直前が不具合なく動くのでおすすめです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>

jQuery(document).ready(function(){
	html	= jQuery('html');
	dBtn	= jQuery('.iconMenu');
	dPane	= jQuery('#menu');
	dBtn.on('click', function () {
	$(this).toggleClass('opened');
	if($(this).hasClass('opened')){
	dPane.css('display','block');
	}else{
	dPane.css('display','none');
	}
});
var slideout = new Slideout({
	'panel': document.getElementById('mainContent'),
	'menu': document.getElementById('menu'),
	'padding': 300,
	'tolerance': 70,
	'duration': 100,
	'side': 'right',
	'touch': false
});
document.querySelector('.iconMenu').addEventListener('click', function () {
	slideout.toggle();
});
});

これでOKです！スマホメニューどうしようー？と悩んでいる方一度ぜひ実装してみてください！

Creator Note

Design & web

WP（ワードプレス）でslideout.jsを使用したときのスマホ用のメニュー実装の備忘録

HTML

CSS

slideout.js

Leave a Reply コメントをキャンセル