Snow Monkey トグルメニューを右にする

このサイトでもモバイル表示の時に、トグルメニューを表示する形にしてますが、Snow Monkeyではあまり見かけない右表示にしています。

右にする場合に、ちょっと厄介なコト

メニューの開く・閉じるボタンが右側に有りますが、メニューが出るとそのボタンに被さるように出てしまいます。
なので、まずはその部分を被さらないようにする必要があります。

被らないように、上方向のスタート座標をずらすと…

topなどを追加する形で、ちょっとずらす事が出来ます。
ただ、元々のナビゲーションバーの高さが変わった場合には、ずらした値と差異が出る事で、正しく表示されなくなる場合も、あるようです。

メニューの上部に閉じるボタンを出すように

このサイトでは被らないようにするのではなく、被るけどメニューの上には別の閉じるボタンを表示して問題を解決させています。

やり方はプラグインも使って、ナビゲーションメニューの上部にコンテンツを入れるカスタマイズの形でやります。

やり方

プラグインのfunctionに下記を加えます。

add_action(
	'snow_monkey_prepend_drawer_nav',
	function() {
		$html = <<< EOM
<div class="menu-top c-drawer__item">
	<div class="close-area">
		<a href="#sm-drawer" class="c-hamburger-btn" aria-expanded="true">
			<div class="c-hamburger-btn__bars">
				<div class="c-hamburger-btn__bar"></div>
				<div class="c-hamburger-btn__bar"></div>
				<div class="c-hamburger-btn__bar"></div>
			</div>
			<div class="c-hamburger-btn__label">CLOSE</div>
		</a>
	</div>
</div>
EOM;
echo $html;
	}
);

EOMからEOMまでが表示されるHTML文となっています。

次に、CSSに下記を加えます。

#drawer-nav {
	left: auto;
	right: -100%;
	transition: right .2s ease-out;
	padding-top: 60px;
}

#drawer-nav[aria-hidden="false"] {
	right: 0;
}

.menu-top {
	z-index: 200000;
	position: fixed;
	display: flex;
	right: 0;
	top: 0;
	width: 18.69565rem;
	max-width: 80%;
	height: 60px;
	padding-top: .93478rem;
}

.menu-top .close-area {
	float: right;
	width: 100%;
	text-align: right;
}

.menu-top a {
	text-decoration: none;
}
.menu-top:after {
	clear:both;
	content: " ";
	display: table;
}

@supports (padding-left: constant(safe-area-inset-right)) or (padding-left: env(safe-area-inset-right)) {
	[id="drawer-nav"] {
		padding-left: 0;
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
		width: calc(18.69565rem + constant(safe-area-inset-right));
		width: calc(18.69565rem + env(safe-area-inset-right));
	}
	.menu-top {
		padding-right: calc(.93478rem + constant(safe-area-inset-right));
		padding-right: calc(.93478rem + env(safe-area-inset-right));
		width: calc(18.69565rem + constant(safe-area-inset-right));
		width: calc(18.69565rem + env(safe-area-inset-right));
	}
}
@supports (padding-left: constant(safe-area-inset-bottom)) or (padding-left: env(safe-area-inset-bottom)) {
	[id="drawer-nav"] {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
}

これだけで、右表示+メニューの上に閉じるボタンが出た形で表示されるようになります。
お試しください。

この記事を書いた人

kmix-39

kmix-39

主に日本の関西に出没する。
小学時代にWindows 95に触れ、BASICを始めて以来、HTML、Perl、Java(JSP, Servlet)、COBOL、C++、C#、PHP、Objective-C、Swift…と、数々の言語を地獄の現場を経験しながら覚えていった元IT社畜。
「好きな時に 好きなことを 好きなだけ」をしたい。