万能型

目的

• 多くのメニューをハンバーガーメニュー内に収めて、初期状態の見た目をスッキリとした印象にしたい。
• JavaScriptを使わずHTMLとCSSだけでハンバーガーメニューを実装したい。
• 既存サイトにもコピー＆ペーストだけで簡単に導入が出来るようにしたい。

実行結果

このスペースで表示すると分かりづらいのでサンプルページをご覧ください。遷移先ページの右上にハンバーガーメニューがあります。

解説

• メニューをハンバーガーメニュー内に収めておき、3本線をクリックした時だけ表示されます。×をクリックすると戻ります。
• 右上に固定させていますが固定解除も可能です(後述)。
• 多くのメニューをそのまま表示しておくと乱雑な印象を与えがちです。ハンバーガーメニュー内に収めておき、初期状態の見た目をスッキリしたコンパクトな印象にしたいサイトにオススメです。

HTML

<div class="structure_6_1">
	<input type="checkbox" id="menu_button_check">
	<label for="menu_button_check" class="menu_button"><span></span></label>
	<nav>
		<div>
			<div>
				<input type="checkbox" id="menu_1">
				<label for="menu_1">装飾</label>
					<div>
						<div>
							<ul>
								<li><a href="https://note-book.foo/layout/">HOME</a></li>
								<li><a href="https://note-book.foo/layout/2/">見出し</a></li>
								<li><a href="https://note-book.foo/layout/4/">テキスト+画像</a></li>
								<li><a href="https://note-book.foo/layout/5/">画像メニュー</a></li>
								<li><a href="https://note-book.foo/layout/3/">リスト</a></li>
								<li><a href="https://note-book.foo/layout/6/">テーブル</a></li>
								<li><a href="https://note-book.foo/layout/8/">テクスチャー</a></li>
								<li><a href="https://note-book.foo/layout/1/">均等横並び</a></li>
								<li><a href="https://note-book.foo/layout/7/">画像背景</a></li>
								<li><a href="https://note-book.foo/layout/9/">動画</a></li>
							</ul>
						</div>
					</div>
			</div>
			<div>
				<input type="checkbox" id="menu_2">
				<label for="menu_2">構造</label>
					<div>
						<div>
							<ul>
								<li><a href="https://note-book.foo/structure/">HOME</a></li>
								<li><a href="https://note-book.foo/structure/3/">新着情報</a></li>
								<li><a href="https://note-book.foo/structure/1/">パンくずリスト</a></li>
								<li><a href="https://note-book.foo/structure/5/">フッター</a></li>
								<li><a href="https://note-book.foo/structure/2/">タブメニュー</a></li>
								<li><a href="https://note-book.foo/structure/4/">ドロップダウンメニュー</a></li>
								<li><a href="https://note-book.foo/structure/6/">ハンバーガーメニュー</a></li>
							</ul>
						</div>
					</div>
			</div>
			<div>
				<input type="checkbox" id="menu_3">
				<label for="menu_3">管理</label>
					<div>
						<div>
							<ul>
								<li><a href="https://note-book.foo/management/">HOME</a></li>
								<li><a href="https://note-book.foo/management/1/">.htaccess</a></li>
								<li><a href="https://note-book.foo/management/2/">パス</a></li>
							</ul>
						</div>
					</div>
			</div>
		</div>
	</nav>
</div>

• 右上に絶対配置されます。既存サイトへ組み込む場合は、基本的にどこへ置いても右上に置かれるはずですが、上手く置けない場合は<header>〜</header>と無関係の場所へ配置してください。

CSS

.structure_6_1 {
	position: fixed;
	top: 30px;
	right: 4%;
	box-sizing: border-box;
}

.structure_6_1 #menu_button_check {
	display: none;
}

.structure_6_1 .menu_button {
	background-color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	width: 54px;
	height: 54px;
	position: relative;
	z-index: 1000;
}

.structure_6_1 .menu_button span,
.structure_6_1 .menu_button span:before,
.structure_6_1 .menu_button span:after {
	background-color: #FFFFFF;
	display: block;
	width: 30px;
	height: 3px;
	position: absolute;
	content: '';
	transition: all 0.1s;
}

.structure_6_1 .menu_button span:before { bottom: 12px; }
.structure_6_1 .menu_button span:after { top: 12px; }

.structure_6_1 #menu_button_check:checked ~ .menu_button span {
	background-color: transparent;
}

.structure_6_1 #menu_button_check:checked ~ .menu_button span:before {
	bottom: 0;
	transform: rotate(45deg);
}

.structure_6_1 #menu_button_check:checked ~ .menu_button span:after {
	top: 0;
	transform: rotate(-45deg);
}

.structure_6_1 nav {
	width: 100%;
	height: 70vh;
	position: fixed;
	top: -70vh;
	left: 0;
	z-index: 999;
	background-color: #FFFFFF;
	transition: top 0.3s ease-in-out;
	overflow-y: auto;
}

.structure_6_1 #menu_button_check:checked ~ nav {
	top: 0;
}

.structure_6_1 nav > div {
	display: flex;
	justify-content: space-around;
	padding-top: 100px;
	padding-right: 40px;
	padding-bottom: 50px;
	padding-left: 40px;
	gap: 50px;
}

.structure_6_1 nav > div > div {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	min-width: 0;
}

.structure_6_1 nav > div > div input[type="checkbox"] {
	display: none;
}

.structure_6_1 nav > div > div label {
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	border-bottom: solid 2px #333333;
}

.structure_6_1 nav > div > div label::after {
	font-size: 22px;
	font-weight: normal;
	content: '−';
}

.structure_6_1 nav > div > div > div {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.2s ease-in-out;
}

.structure_6_1 nav > div > div > div > div {
	min-height: 0;
	overflow: hidden;
}

.structure_6_1 nav > div > div > div > div ul {
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	list-style: none;
}

.structure_6_1 nav > div > div > div > div li a {
	font-size: 15px;
	text-decoration: none;
	color: #666666;
	display: block;
	padding-top: 12px;
	padding-right: 10px;
	padding-bottom: 12px;
	padding-left: 10px;
}

.structure_6_1 nav > div > div > div > div li a:hover {
	background-color: #F5F5F5;
}

.structure_6_1 nav > div > div input[type="checkbox"]:checked + label::after {
	content: '+';
}

.structure_6_1 nav > div > div input[type="checkbox"]:checked ~ div {
	grid-template-rows: 0fr;
}

.structure_6_1_sample {
	font-size: 20px;
	line-height: 1.8;
	background-color: #F5F5F5;
	display: flex;
	width: 100%;
	padding-top: 80px;
	padding-right: 0px;
	padding-bottom: 80px;
	padding-left: 0px;
}

.structure_6_1_sample > div:nth-child(1) {
	text-align: right;
	width: 20%;
}

.structure_6_1_sample > div:nth-child(2) {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 80px;
}

.structure_6_1_sample_b {
	font-size: 20px;
	line-height: 1.8;
	background-color: #FFFFFF;
	display: flex;
	width: 100%;
	padding-top: 80px;
	padding-right: 0px;
	padding-bottom: 80px;
	padding-left: 0px;
}

.structure_6_1_sample_b > div:nth-child(1) {
	text-align: right;
	width: 20%;
}

.structure_6_1_sample_b > div:nth-child(2) {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 80px;
}

• ハンバーガーメニューは右上に固定しているので、スクロールしても常に右上に表示されます。固定解除は2行目をabsoluteに変えてください。その際にハンバーガーメニューの位置がズレたら3行目と4行目の値を変えて調整します。
• 背景色を消して3本線だけにする場合は13行目のbackground-colorを削除します。3本線が背景色と同化するなど不都合が生じた場合は27行目で色を調整します。メニューボタンの位置は3行目と4行目で調整します。
• 3本線から×へ変わる速度は33行目のtransition: all 0.1s;で変えられます。
• 3本線の間隔は36行目と37行目で調整し、同じ値にします。
• 55行目のheight: 70vh;はハンバーガーメニューのheightを画面の70％にする構文です。ここの値を変えた場合は57行目のtop: -70vh;の値も変える必要があります。例えばheightを80vhにしたらtopは-80vhにします。

.structure_6_1 {
	position: fixed;
	top: 3%;
	right: 6%;
	box-sizing: border-box;
}

.structure_6_1 #menu_button_check {
	display: none;
}

.structure_6_1 .menu_button {
	background-color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	width: 40px;
	height: 40px;
	position: relative;
	z-index: 1000;
}

.structure_6_1 .menu_button span,
.structure_6_1 .menu_button span:before,
.structure_6_1 .menu_button span:after {
	background-color: #FFFFFF;
	display: block;
	width: 24px;
	height: 3px;
	position: absolute;
	content: '';
	transition: all 0.1s;
}

.structure_6_1 .menu_button span:before { bottom: 8px; }
.structure_6_1 .menu_button span:after { top: 8px; }

.structure_6_1 #menu_button_check:checked ~ .menu_button span {
	background-color: transparent;
}

.structure_6_1 #menu_button_check:checked ~ .menu_button span:before {
	bottom: 0;
	transform: rotate(45deg);
}

.structure_6_1 #menu_button_check:checked ~ .menu_button span:after {
	top: 0;
	transform: rotate(-45deg);
}

.structure_6_1 nav {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: -100vh;
	left: 0;
	z-index: 999;
	background-color: #FFFFFF;
	transition: top 0.3s ease-in-out;
	overflow-y: auto;
}

.structure_6_1 #menu_button_check:checked ~ nav {
	top: 0;
}

.structure_6_1 nav > div {
	flex-direction: column;
	padding-top: 80px;
	padding-right: 20px;
	padding-bottom: 50px;
	padding-left: 20px;
	gap: 50px;
}

.structure_6_1 nav > div > div {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	min-width: 0;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

.structure_6_1 nav > div > div input[type="checkbox"] {
	display: none;
}

.structure_6_1 nav > div > div label {
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	border-bottom: solid 2px #333333;
}

.structure_6_1 nav > div > div label::after {
	font-size: 22px;
	font-weight: normal;
	content: '+';
}

.structure_6_1 nav > div > div > div {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.2s ease-in-out;
}

.structure_6_1 nav > div > div > div > div {
	min-height: 0;
	overflow: hidden;
}

.structure_6_1 nav > div > div > div > div ul {
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	list-style: none;
}

.structure_6_1 nav > div > div > div > div li a {
	font-size: 15px;
	text-decoration: none;
	color: #666666;
	display: block;
	padding-top: 12px;
	padding-right: 10px;
	padding-bottom: 12px;
	padding-left: 10px;
}

.structure_6_1 nav > div > div > div > div li a:hover {
	background-color: #F5F5F5;
}

.structure_6_1 nav > div > div input[type="checkbox"]:checked + label::after {
	content: '-';
}

.structure_6_1 nav > div > div input[type="checkbox"]:checked ~ div {
	grid-template-rows: 1fr;
}

.structure_6_1_sample {
	font-size: 20px;
	line-height: 1.8;
	background-color: #F5F5F5;
	display: flex;
	width: 100%;
	padding-top: 80px;
	padding-right: 0px;
	padding-bottom: 80px;
	padding-left: 0px;
}

.structure_6_1_sample > div:nth-child(1) {
	text-align: right;
	width: 20%;
}

.structure_6_1_sample > div:nth-child(2) {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 30px;
}

.structure_6_1_sample_b {
	font-size: 20px;
	line-height: 1.8;
	background-color: #FFFFFF;
	display: flex;
	width: 100%;
	padding-top: 80px;
	padding-right: 0px;
	padding-bottom: 80px;
	padding-left: 0px;
}

.structure_6_1_sample_b > div:nth-child(1) {
	text-align: right;
	width: 20%;
}

.structure_6_1_sample_b > div:nth-child(2) {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 30px;
}

• スマホ版の解説内容はPC版と同じなので、PC版をご覧ください。