ブログ

2019.08.29

#webサイト

【コピペで簡単】JSを使用しないドロワーメニューの実装方法

こんにちは。
8月も残すところわずかとなりました。

今年の夏はBBQや海にも遊びに行きましたが、何か夏らしい事をやり残してはいないかと
そわそわしている小林です。

さて、今回はWebサイトでよく見かける、ドロワーメニューの実装方法について
書いて見ようと思います。

ドロワーメニューとは

そもそも「ドロワー」とは、引き出しといった意味の名詞になります。

普段は格納されていますが、画面外から引き出して表示させるナビゲーションメニューがそれに当たります。

パソコンのブラウザではそこまで利便性を感じられませんが、表示領域の少ないスマホやタブレットでは

とても有効的な手段ではないでしょうか。

CSSのみでドロワーメニューを実装する方法

クリックやタップでドロワーメニューを展開させる場合、jQueryを使用してプログラムを組むのが一般的だと

思いますが、今回はCSSのみでドロワーメニューを開閉させてみたいと思います。

まずはデモをご覧ください。

・CSSのみで実装したドロワーメニュー

デモ右上の3本線をクリックすることでドロワーメニューを開閉させる事ができます。

メニューが開閉する仕組み(HTML)

ページ全体のHTMLの構造は下記の通りです。

<body>
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open"><span></span></label>
<label for="navTgl" class="close"></label>
	<nav class="menu">
		<h2>MENU</h2>
		<ul>
			<li><a href="#menu1">menu</a></li>
			<li><a href="#menu2">menu</a></li>
			<li><a href="#menu3">menu</a></li>
			<li><a href="#menu4">menu</a></li>
			<li><a href="#menu5">menu</a></li>
		</ul>
</nav>

<div class="contents_A">
		<div class="contents_box">
			<h1>Drawer Menu Sample</h1>
		</div>
	</div>
	
	<div class="contents_B">
		<div class="contents_box">
			<h1>Drawer Menu Sample</h1>
		</div>
	</div>
	
	<div class="contents_C">
		<div class="contents_box">
			<h1>Drawer Menu Sample</h1>
		</div>
	</div>
</body>

<body>

<ul>

</ul>

</nav>

<h1>Drawer Menu Sample</h1>

</div>

<h1>Drawer Menu Sample</h1>

</div>

<h1>Drawer Menu Sample</h1>

</div>

</body>

<input>タグ一つに対して、<label>タグを2つ用意してあります。

ひとつは開くと閉じるの両方で、もうひとつを閉じる用としています。

これだけ言われるとわかりにくいかもしれませんが、要は常に見えているボタンと

閉じる用の<label for=”navTgl” class=”close”></label>を配置しておき、

コンテンツエリアには見えないcheckboxをそれらのスイッチの役割として置いています。

チェックボックスがチェックされる事で、スタイルが入り切りされる仕組みです。

CSSの記述

コンテンツ部分のCSSは割愛しています。

body {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
.contents {
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ++++ トグルボタン ++++ */
	
#navTgl {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 0;
}
.open {
	z-index: 2;
	width: 60px;
	height: 48px;
	transition: background .5s, transform .5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid white;
	transition: transform .5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
}
.open::before {
	transform: translateY(-8px);
}
.open::after {
	transform: translateY(8px);
}
.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .5s;
}
#navTgl:checked + .open span {
	transform: scaleX(0);
}
#navTgl:checked + .open::before {
	transform: rotate(45deg);
}
#navTgl:checked + .open::after {
	transform: rotate(-45deg);
}
#navTgl:checked ~ .close {
	background: rgba(0,0,0,.7);
}

/* ++++ ドロワーメニュー ++++ */
.menu {
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 6%;
	margin: 0;
	box-sizing: border-box;
	transform: translateX(-100%);
	transition: transform .5s cubic-bezier(0.33, 1.01, 0.33, 0.97);
}
.menu h2,
.menu a {
	color: white;
	font-family: 'Comfortaa', cursive, "Century Gothic", "helvetica neue", arial, sans-serif !important;
}
.menu h2 {
	text-align: center;
}
.menu ul {
	padding: 0;
	text-align: center;
	width: 250px;
	margin: 0 auto;
}
.menu li {
	font-size: .9em;
	line-height: 1.4;
}
.menu a {
	display: block;
	padding: 1.4em 2em;
	text-decoration: inherit;
	transition: background .5s;
}
.menu li:hover:after {
	display: block;
	content: '';
	width: 100px;
	margin: 0 auto;
	border-bottom: 1px solid #fff;
}
#navTgl:checked ~ .menu {
	transform: none;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

body {

margin: 0;

padding: 0;

}

ul {

list-style: none;

}

.contents {

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

}

/* ++++ トグルボタン ++++ */

#navTgl {

display: none;

}

label {

cursor: pointer;

position: fixed;

top: 0;

right: 0;

}

.open {

z-index: 2;

width: 60px;

height: 48px;

transition: background .5s, transform .5s cubic-bezier(0.76, 0.52, 0.29, 1.25);

}

.open::before,

.open::after {

content: "";

}

.open span,

.open::before,

.open::after {

content: "";

position: absolute;

top: calc(50% - 1px);

left: 30%;

width: 40%;

border-bottom: 2px solid white;

transition: transform .5s cubic-bezier(0.76, 0.52, 0.29, 1.25);

}

.open::before {

transform: translateY(-8px);

}

.open::after {

transform: translateY(8px);

}

.close {

z-index: 1;

width: 100%;

height: 100%;

pointer-events: none;

transition: background .5s;

}

#navTgl:checked + .open span {

transform: scaleX(0);

}

#navTgl:checked + .open::before {

transform: rotate(45deg);

}

#navTgl:checked + .open::after {

transform: rotate(-45deg);

}

#navTgl:checked ~ .close {

background: rgba(0,0,0,.7);

}

/* ++++ ドロワーメニュー ++++ */

.menu {

z-index: 1;

position: fixed;

overflow: auto;

top: 0;

left: 0;

width: 100%;

height: 100%;

padding: 6%;

margin: 0;

box-sizing: border-box;

transform: translateX(-100%);

transition: transform .5s cubic-bezier(0.33, 1.01, 0.33, 0.97);

}

.menu h2,

.menu a {

color: white;

font-family: 'Comfortaa', cursive, "Century Gothic", "helvetica neue", arial, sans-serif !important;

}

.menu h2 {

text-align: center;

}

.menu ul {

padding: 0;

text-align: center;

width: 250px;

margin: 0 auto;

}

.menu li {

font-size: .9em;

line-height: 1.4;

}

.menu a {

display: block;

padding: 1.4em 2em;

text-decoration: inherit;

transition: background .5s;

}

.menu li:hover:after {

display: block;

content: '';

width: 100px;

margin: 0 auto;

border-bottom: 1px solid #fff;

}

#navTgl:checked ~ .menu {

transform: none;

}

チェックボックス自体はdisplay: none;で非表示にしていますが、2つのlabel要素と

紐づいている為、しっかり仕事をしてくれています。

最後に

:checked擬似クラスはIE9以上で使用できるみたいですが、古いブラウザを考慮しなければいけない場合は

使用を控えた方が良いかもしれません。

しかし、表示領域の少ないスマホでは確実に便利な手段ではないでしょうか。

この記事を書いた人

小林サトシ

back to list

CONTACT HERE!

サービスのご依頼やお問い合わせはこちらから

NEWS

ALL POST

【コピペで簡単】JSを使用しないドロワーメニューの実装方法

ドロワーメニューとは

CSSのみでドロワーメニューを実装する方法

メニューが開閉する仕組み(HTML)

CSSの記述

最後に

小林サトシ

CONTACT HERE!

NEWS

ニュース 2024.04.08

ニュース 2024.02.15

ニュース 2023.11.14