ハンバーガーメニューをコピペCSSでおしゃれに！レスポンシブ･デザイン

2023/7/19WEB製作

CSSのみ、しかもコピペだけで使用できる、レスポンシブかつおしゃれなハンバーガーメニュー･デザインをご紹介します。

ハンバーガーメニューのデザインは、サイトのヘッダーを彩る重要な要素になるため、おしゃれに仕上げたいところですよね。

JavaScriptなし･CSSのみのハンバーガーメニューは動作が軽いため、サイトの高速表示･ユーザービリティーの向上にも繋がります。

今回ご紹介するハンバーガーメニュー･デザインは、スマホ･タブレットのみに表示するためのレスポンシブ対応も施してありますので、CSSコピペでそのままお使いいただくことが可能です。

ハンバーガーメニュー･デザインDemo

ハンバーガーメニューのデザインは、下記デモページにてまとめてご確認いただけます。

お好みのハンバーガーメニューの番号を控え、当ページ内でご紹介するCSSをコピペしてください。

• ハンバーガーメニュー･デザインのDEMO

デザインCSSをコピペする前に

コピペCSSの使い方

今回ご紹介するハンバーガーメニュー･デザインは、基本的にHTML･CSSのコピペで導入可能です。

ただし、ハンバーガーメニューの配置や細かな余白の設定等、各自調整していただく部分もございます。

尚、既存のメニューに当ページでご紹介するCSSを適用する際には、CSSのコピペだけではなく、HTMLにおけるclass等の書き換え･追記も必要になる場合もあります。

あらかじめご了承ください。

ヘッダーの高さによって調整が必要

ハンバーガーアイコンの大きさや位置は、ヘッダーの高さ（縦の長さ）によって変動します。

あまりにヘッダーが細いデザインの場合には、ハンバーガーアイコンが収まらない可能性もあります。

ちなみに、デモページにて表示しているヘッダーの高さは64pxです。

各コピペ用CSSの先頭には、参考としてデモのヘッダーに関するCSSも記載してあります。

レスポンシブ･デザインについて

当ページ内でご紹介するハンバーガーメニューのデザインCSSは、コピペで使用できるよう一律で「スマホ･タブレットのみ表示」となるようレスポンシブ対応しています。

PCにも対応させたい場合や、スマートフォンのみでハンバーガーメニューを表示させたい場合には、各自mediaクエリを調整してください。

尚、レスポンシブのブレイク･ポイントについても同様、各自調整を必要とする場合があります。

WordPressはPHPの操作も必要

WordPressが生成するメニューに対して、ハンバーガーメニュー･デザインのCSSを適用したい場合には、当ページでご紹介しているHTML内にWordPressのメニューを組み込むPHPコードを書き足す必要があります。

その際、PHPファイルを編集する必要があるため、カスタマイズ経験が少なく不安な方は、お問い合わせページよりお気軽にご依頼ください。

尚、既存のテーマのハンバーガーメニューをアレンジしたい場合には、対応する各classのCSSを上書きしなければならないため、コピペのみで適用することはできません。

理想のハンバーガーメニュー･デザインをWordPressで作成したサイトに適用したい場合は、ぜひSTALDIAまでご相談ください。

macOSでデザインが崩れる場合

疑似要素を用いたハンバーガーメニュー･デザインをmacOS上で表示した際、疑似要素の位置がズレてデザインが崩れる問題が発生するケースがあります。

macOSへの対応方法については、下記の記事にて別途まとめてありますので、併せてご覧ください。

• macOSでCSS疑似要素がズレる/崩れる場合の対処法

ハンバーガーメニューCSSをコピペ

１．シンプルなハンバーガーメニュー

まずは、右から現れるシンプルなハンバーガーメニューのデザインCSSからご紹介。

コピペするだけで、多くのWebサイトで見かけるおしゃれなハンバーガーメニューを導入できます。

ハンバーガーメニューを開いている間はコンテンツ側に暗いグレーのカバーがかかり、メニューの内容に集中しやすいデザインに仕上げました。

尚、メニューリストの内容が増えた時にはメニューエリア内で縦スクロール可能になっており、メニュー展開時のみハンバーガーアイコン（閉じるボタン）はブラウザ右上に固定されます。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo1" type="checkbox" class="input-hidden">
		<label for="hamburger-demo1" class="hamburger-demo-switch hamburger-demo-switch1">
			<span class="hamburger-switch-line1"></span>
		</label>
		<div class="hamburger-demo-menuwrap">
			<ul class="hamburger-demo-menulist">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-cover"></div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
background: #ddd;
height: 64px;
padding: 1em;
}
/* headerのサイト名（デモの参考値） */
.demobox-sitename{
font-weight: 700;
font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* inputを非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0; /* ハンバーガーアイコンの位置（上から） */
	z-index: 9999;
	width: 4em; /* アイコン（クリック可能領域）の幅 */
	height: 4em; /* アイコン（クリック可能領域の）高さ */
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* ハンバーガーアイコン */
.hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
	width: 25px;
	height: 3px;
	background: #333; /* ハンバーガーアイコンの色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s;
	content: "";
}
.hamburger-switch-line1{
		transform: translate(-50%, -50%);
}
.hamburger-switch-line1:before{
	transform: translate(-50%, -300%);
}
.hamburger-switch-line1:after{
	transform: translate(-50%, 200%);
}
/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
	width: 0;
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:before{
	transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:after{
	transform: rotate(-45deg) translate(-40%, -325%);
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #fafafa; /* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合もあり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #333; /* メニューリストの文字色 */
	display: block;
	padding: .5em 0;
}
/* メニューエリア･アニメーション */
	/* 右から */
#hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo1:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

メニューリストの内容が増えた時の対策として、メニューエリアに"overflow-y: scroll"を設定しています。

これにより、画面に収まらない量のコンテンツをメニュー欄に含みたい場合であっても対応可能です。

また、メニューリストのulタグ（.hamburger-demo-menulist）には、サイト全体でpadding-leftを設定されているケースが多いことから、padding-leftに対して予め"!important"を付与しています。

!importantを外してもデザインが崩れない場合には、!importantは不要なので削除しましょう。

尚、レスポンシブデザインのブレイクポイントは、必要に応じて変更してください。

２．iOS風スイッチ･ハンバーガーメニュー

iOS端末を中心に、最近よく目にする「トグルスイッチ」を取り入れた、おしゃれなハンバーガーメニュー･デザインです。

メニューエリアにも薄い色の線や矢印風アイコンをあしらうことで、iOS端末のUIを再現しています。

トグルスイッチのアイコンだけでは、ハンバーガーメニューであることを判別しづらいため、ユーザー利便性を考慮し、"MENU"の文字を添えました。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo2" type="checkbox" class="input-hidden">
		<label for="hamburger-demo2" class="hamburger-demo-switch hamburger-demo-switch2">
			<span class="hamburger-switch-ios"></span>
		</label>
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-right">
			<ul class="hamburger-demo-menulist hamburger-menulist-border">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-cover"></div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
background: #ddd;
height: 64px;
padding: 1em;
}
/* headerのサイト名（デモの参考値） */
.demobox-sitename{
font-weight: 700;
font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0; /* アイコン位置調整（上から） */
	z-index: 9999;
	width: 4em; /* アイコン（クリック可能領域）の幅 */
	height: 4em; /* アイコン（クリック可能領域）の高さ */
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo2:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* iOS風ハンバーガーアイコン */
.hamburger-switch-ios:before{
	content: "";
	position: absolute;
	width: 4em;
	height: 2em;
	background: #c0c0c0;
	border-radius: 3em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -70%);
}
.hamburger-switch-ios:after{
	content: "";
	position: absolute;
	width: 2em;
	height: 2em;
	background: #fff;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-100%, -70%);
	transition: .3s;
}
.hamburger-demo-switch2:before{
	content: "MENU";
	position: absolute;
	bottom: 0;
	font-size: 12px;
	left: 50%;
	transform: translate(-50%, 10%);
	font-weight: 600;
}
#hamburger-demo2:checked ~ .hamburger-demo-switch2 .hamburger-switch-ios:before{
	background: #66c666;
}
#hamburger-demo2:checked ~ .hamburger-demo-switch2 .hamburger-switch-ios:after{
	transform: translate(0, -70%);
}
#hamburger-demo2:checked ~ .hamburger-demo-switch2:before{
	content: "CLOSE";
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #fafafa;
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /*リスト内容が多い場合に縦スクロール */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合もあり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #333;
	display: block;
	padding: .5em 0;
}
/* iOS風ボーダーメニューリスト化 */
.hamburger-menulist-border li{
	border-bottom: 1px solid #ddd;
	position: relative;
}
.hamburger-menulist-border li a:before{
	content: "";
	width: .7em;
	height: .7em;
	border: 2px solid;
	border-color: #ccc #ccc transparent transparent;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate( -100%, -50%) rotate(45deg);
}
/* メニューエリア･アニメーション */
	/* 右から */
#hamburger-demo2:checked ~ .hamburger-demo-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo2:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

ベースデザインはNo.1と同じで、アイコンとメニューエリアに装飾を加えたものです。

iOS風トグルスイッチのハンバーガーアイコンは、２つのパーツから成っており、サイズを調整するには各パーツの微調整が必要となるため、少々手間がかかります。

ヘッダーが細すぎて収まらない等の問題がある場合には、ハンバーガーメニュー全体のサイズ調整が必要になるケースもあります。

コーディングの知識がない方は、STALDIAまでご相談ください。

３．メニュー外タップで閉じるデザイン

Google ChromeやYouTube等、Googleによるサービスに多く用いられているハンバーガーメニューのデザインを再現しました。

ハンバーガーアイコンは、縦に並んだ３つのシンプルなドット。

そして、ハンバーガーメニュー外であれば、どこをタップしてもメニューを閉じることができる点が最大の特徴です。

特に、Androidユーザーにとっては馴染みの深いメニューUIと言えるかもしれません。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo3" type="checkbox" class="input-hidden">
		<label for="hamburger-demo3" class="hamburger-demo-switch hamburger-demo-switch3">
			<span class="hamburger-switch-dot1"></span>
		</label>
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-left">
			<ul class="hamburger-demo-menulist hamburger-menulist-nodot">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-closelabel">
			<label for="hamburger-demo3" class="hamburger-demo-cover"></label>
		</div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
	background: #ddd;
	height: 64px;
	padding: 1em;
}
/* headerのサイト名（デモの参考値） */
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0;
	width: 4em;
	height: 4em;
}
/* dot･メニュー外タップで閉じるデザイン */
.hamburger-switch-dot1, .hamburger-switch-dot1:before, .hamburger-switch-dot1:after{
	height: 5px;
	width: 5px;
	position: absolute;
	background: #333; /* ハンバーガーアイコン･ドットの色 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	content: "";
}
.hamburger-switch-dot1:before{
	transform: translate(-50%, -200%);
}
.hamburger-switch-dot1:after{
	transform: translate(-50%, 100%);
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #fafafa;
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー内容が多い場合に縦スクロール */
	top: 0;
	right: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !importantは不要は場合あり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #333; /* ハンバーガーメニューリストの文字色 */
	display: block;
	padding: .5em 0;
}
/* メニューエリアchecked */
	/* 左から */
#hamburger-demo3:checked ~ .hamburger-demo-menuwrap{
	right: 30%;
}
	/* メニュー外側コンテンツカバー */
#hamburger-demo3:checked ~ .hamburger-demo-closelabel{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#hamburger-demo3:checked ~ .hamburger-demo-closelabel .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
	cursor: pointer;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

ハンバーガーメニューを開いた際にコンテンツ側を暗くするグレーのカバーにlabel要素を用いることで、クリック･タップによるハンバーガーメニューの収納が可能になっています。

アイコンよりもグレーのカバー、グレーのカバーよりもメニューエリアが上に重なるようz-indexを調整しましょう。

４．円を用いたハンバーガーデザイン

個性的なデザインで周りのサイトと差を付けたい場合におすすめのハンバーガーメニュー･デザインです。

メニューリストの項目も丸みを帯びた線で囲んであり、ポップな印象を与えます。

曲線の柔らかさと矢印風アイコンの鋭さの調和によって、多様なシーンにて活用できるデザインに仕上げました。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo4" type="checkbox" class="input-hidden">
		<label for="hamburger-demo4" class="hamburger-demo-switch hamburger-demo-switch4">
			<span class="hamburger-switch-circle"></span>
		</label>
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-right">
			<ul class="hamburger-demo-menulist hamburger-menulist-circle">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-cover"></div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
	background: #ddd;
	height: 64px;
	padding: 1em;
}
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 9999;
	width: 4em;
	height: 4em;
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo4:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* 円を用いたハンバーガーデザイン */
	/* 外側の円 */
.hamburger-demo-switch4:before{
	content: "";
	position: absolute;
	width: 3em;
	height: 3em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid #333; /* 外側の円（枠線）の色 */
	border-radius: 50%;
}
	/* 真ん中の円 */
.hamburger-switch-circle{
	height: 3px;
	width: 25px;
	background: #333; /* 真ん中の線（円）の色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s;
}
	/* 上下の線 */
.hamburger-switch-circle:before, .hamburger-switch-circle:after{
	content: "";
	position: absolute;
	width: 25px;
	top: 50%;
	left: 50%;
	transition: .3s;
}
.hamburger-switch-circle:before{
	border-top: 3px solid #333; /* ハンバーガーアイコン上側の線の色 */
	transform: translate(-50%, -300%);
}
.hamburger-switch-circle:after{
	border-bottom: 3px solid #333; /* ハンバーガーアイコン下側の線の色 */
	transform: translate(-50%, 200%);
}
/* アイコン･アニメーション */
#hamburger-demo4:checked ~ .hamburger-demo-switch .hamburger-switch-circle{
	height: 25px;
	border-radius: 50%;
}
#hamburger-demo4:checked ~ .hamburger-demo-switch .hamburger-switch-circle:before{
	width: 0;
}
#hamburger-demo4:checked ~ .hamburger-demo-switch .hamburger-switch-circle:after{
	width: 0;
}
	/* 真ん中の×印 */
.hamburger-demo-switch4:after{
	content: "×";
	font-size: 0px;
	position: absolute;
	color: #fff; /* ハンバーガーの"×"マークの色 */
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: .2s;
}
#hamburger-demo4:checked ~ .hamburger-demo-switch4:after{
	font-size: 25px;
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #fafafa; /* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー内容が多い場合に縦スクロール */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合あり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #333; /* メニューエリアの文字色 */
	display: block;
}
	/* 円を用いたメニューリスト */
.hamburger-menulist-circle li{
	border: 1px solid;
	margin-bottom: 5px;
	border-radius: 2em;
}
.hamburger-menulist-circle li a{
	padding: .5em 2.5em .5em 1em;
	position: relative;
}
.hamburger-menulist-circle a:before{
	content: "";
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	background: #333; /* メニューリスト矢印背景（円）の色 */
	border-radius: 50%;
	top: 50%;
	right: .5em;
	transform: translate(0, -50%);
}
.hamburger-menulist-circle a:after{
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border: 2.5px solid;
	border-color: #fff #fff transparent transparent; /* メニューリスト矢印の色（#fffのみ変更） */
	top: 50%;
	right: .5em;
	transform: translate(-80%, -50%) rotate(45deg);
}
/* メニューエリア･アニメーション */
	/* 右から */
#hamburger-demo4:checked ~ .hamburger-demo-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo4:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

ハンバーガーメニューを展開すると、ハンバーガーを構成している真ん中の線が太って円になるデザインであるため、基本的には線の色と円の色は同じにすると良いでしょう。

また、メニューリストのコンテンツ右側に表示する矢印は、疑似要素によって正方形をつくり、その枠線の２辺のみ色を付けて矢印のように見せています。

そのため、矢印の色を変更する際には"transparent"は変更せず、"#fff"の部分のみ変更してください。

５．バインダー調メニューデザイン

今回ご紹介するハンバーガーメニューCSSの中で、もっとも可愛らしい雰囲気かつデザイン性の高いハンバーガーメニューと言えるでしょう。

メニューリストの下にはノートのような破線、メニューリストの左側にはチェックマーク。

おしゃれでポップ、そして可愛らしい印象を与えたい場合に是非導入したいデザインです。

• ハンバーガーニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo5" type="checkbox" class="input-hidden">
		<label for="hamburger-demo5" class="hamburger-demo-switch hamburger-demo-switch5">
			<span class="hamburger-switch-binder"></span>
		</label>
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-left hamburger-menuwrap-binder">
			<ul class="hamburger-demo-menulist hamburger-menulist-binder">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-closelabel">
			<label for="hamburger-demo5" class="hamburger-demo-cover"></label>
		</div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
	background: #ddd;
	height: 64px;
	padding: 1em;
}
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* inpu非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 9999;
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo5:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !importantは不要な場合あり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #333;
	display: block;
	padding: .5em 0;
}
	/* コンテンツカバー */
#hamburger-demo5:checked ~ .hamburger-demo-closelabel{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#hamburger-demo5:checked ~ .hamburger-demo-closelabel .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
	cursor: pointer;
}
/* バインダーデザイン */
	/* バインダー全体共通absolute */
.hamburger-demo-switch5:before, .hamburger-demo-switch5:after, .hamburger-switch-binder:before, .hamburger-menulist-binder, .hamburger-menuwrap-binder:before, .hamburger-menuwrap-binder:after, .hamburger-menulist-binder li:before, .hamburger-menulist-binder li:after{
	content: "";
	position: absolute;
}
	/* スイッチ用バインダーボード */
.hamburger-demo-switch5{
	background: #c5955c;
	width: 3em;
	height: 3.5em;
	transform: translate(0, 5%);
	border-radius: 5px;
}
	/* メニューリスト用ボード */
.hamburger-menuwrap-binder{
	position: fixed;
	background: #c5955c;
	border-radius: 10px;
	height: 96%;
	width: 70%;
	top: 2%;
	right: 100%;
	transition: .3s;
	z-index: 9998;
}
#hamburger-demo5:checked ~ .hamburger-menuwrap-binder{
	right: 28%;
}
	/* バインダー用紙部分 */
.hamburger-demo-switch5:before, .hamburger-menulist-binder{
	width: 90%;
	height: 80%;
	background: #fff;
	top: 14%;
	left: 50%;
	transform: translateX(-50%);
}
	/* メニューリストバインダー用紙調整 */
.hamburger-menulist-binder{
	z-index: -1;
	padding-top: 2em !important; /* 通常は!important不要 */
	overflow-y: scroll;
}
	/* 留め具軸 */
.hamburger-demo-switch5:after, .hamburger-menuwrap-binder:after{
	width: 50%;
	height: 7%;
	background: #777;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
	/* 留め具 */
.hamburger-switch-binder:before, .hamburger-menuwrap-binder:before{
	width: 75%;
	height: 20%;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}
	/* スイッチ用の留め具ボーダー */
.hamburger-switch-binder:before{
	border: 2px solid #c0c0c0;
	border-radius: 3px;
}
	/* メニューリストの留め具ボーダー */
.hamburger-menuwrap-binder:before{
	border: 5px solid #c0c0c0;
	border-radius: 5px;
}
	/* スイッチMENU文字 */
.hamburger-switch-binder:after{
	content: "MENU";
	position: absolute;
	font-size: 12px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%);
}
#hamburger-demo5:checked ~ .hamburger-demo-switch5 .hamburger-switch-binder:after{
	content: "CLOSE";
}
	/* バインダーメニューの下線 */
.hamburger-menulist-binder li{
	border-bottom: 1px dashed #ddd;
	padding-left: 2em;
	position: relative;
	margin-right: 5%;
}
/* メニューリストのチェックマーク */
	/* チェックボックス */
.hamburger-menulist-binder li:before{
	width: 1em;
	height: 1em;
	border: 1px solid #333;
	top: 50%;
	left: 0;
	transform: translate(30%, -50%);
}
	/* チェックマーク */
.hamburger-menulist-binder li:after{
	width: 1em;
	height: 1.5em;
	border: 3px solid;
	border-color: transparent red red transparent;
	top: 50%;
	left: 0;
	transform: rotate(45deg) translate(-65%, -75%);
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

バインダー型のハンバーガーアイコンは、メニュー展開時も最前列に表示されますが、メニュー外であればどこをタップしてもメニューを閉じることができる仕様にしてあります。

他のハンバーガーメニュー･デザインに比べてCSSが複雑であるため、ご自身のサイトに併せてサイズ調整を行う際には調整すべき点が比較的多くなってしまうでしょう。

ヘッダーサイズとの間の余白の調整や各パーツの調整が困難な場合には、STALDIAまでご依頼ください。

６．疾走感あるハンバーガー･デザイン

ハンバーガーメニューを展開すると、ハンバーガーアイコンが右側に飛び去り、左側から×マークが滑り出てくるデザイン。

ハンバーガーアイコンの３本線がそれぞれのタイミングで飛び去ることにより、より疾走感を演出しています。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo6" type="checkbox" class="input-hidden">
		<label for="hamburger-demo6" class="hamburger-demo-switch hamburger-demo-switch6">
			<span class="hamburger-switch-slide"></span>
		</label>
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-right">
			<ul class="hamburger-demo-menulist hamburger-menulist-slide">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-cover"></div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
	background: #ddd;
	height: 64px;
	padding: 1em;
}
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 9999;
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo6:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* ハンバーガーアイコン */
.hamburger-demo-switch6:before, .hamburger-switch-slide:before, .hamburger-switch-slide:after{
	width: 25px;
	height: 3px;
	background: #333; /* ハンバーガーアイコンの色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s;
	content: "";
}
.hamburger-demo-switch6:before{
		transform: translate(-50%, -50%);
}
.hamburger-switch-slide:before{
	transform: translate(-50%, -300%);
}
.hamburger-switch-slide:after{
	transform: translate(-50%, 200%);
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #fafafa; /* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニューリストが多い場合に縦スクロール */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !importantは不要な場合あり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #333; /* メニューリスト項目の文字色 */
	display: block;
	padding: .5em 0;
}
/* メニューエリアアニメーション */
	/* 右から */
#hamburger-demo6:checked ~ .hamburger-demo-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo6:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}
/* 疾走感スタイリッシュ･デザイン */
	/* 外側四角枠 */
.hamburger-demo-switch6{
	width: 3em;
	height: 3em;
	transform: translate(0% ,15%);
	border: 1px solid #333;
	overflow: hidden;
}
	/* ボーダースライド */
.hamburger-demo-switch6:before, .hamburger-switch-slide:before, .hamburger-switch-slide:after{
	transition: .2s;
}
.hamburger-switch-slide:before{
	transition-delay: 0;
}
.hamburger-demo-switch6:before{
	transition-delay: .1s;
}
.hamburger-switch-slide:after{
	transition-delay: .2s;
}
#hamburger-demo6:checked ~ .hamburger-demo-switch6:before, #hamburger-demo6:checked ~ .hamburger-demo-switch .hamburger-switch-slide:before, #hamburger-demo6:checked ~ .hamburger-demo-switch6 .hamburger-switch-slide:after{
	left: 500%;
}
	/* ×マークスライド */
.hamburger-demo-switch6:after{
	content: "×";
	font-size: 2.5em;
	position: absolute;
	top: 50%;
	left: -500%;
	transform: translate(-50%, -50%);
	transition: .3s;
}
#hamburger-demo6:checked ~ .hamburger-demo-switch6:after{
	left: 50%;
}
	/* メニューリストの矢印風ボーダー */
.hamburger-menulist-slide li{
	position: relative;
}
.hamburger-menulist-slide a:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 1em;
	border: 1.5px solid;
	border-color: transparent #333 #333 transparent;
	left: 50%;
	bottom: 0;
	transform: skewx(45deg) translate(-50%, -50%);
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

このCSSのポイントは、"overflow: hidden;"の部分。

特定の範囲からはみ出した部分を非表示にすることで、スライドによるアイコンの登場動作を表現できるようになります。

アイコン周りのボーダーの有無はお好みで良いでしょう。

７．段階的ハンバーガーアニメーション

ハンバーガーアイコンが段階的なアニメーションで×マークに変形していく、クセになるおしゃれデザイン。

シンプルながら個性的な印象を与えることができるハンバーガーメニューです。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo7" type="checkbox" class="input-hidden">
		<label for="hamburger-demo7" class="hamburger-demo-switch hamburger-demo-switch7">
			<span class="hamburger-switch-separate"></span>
		</label>
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-right">
			<ul class="hamburger-demo-menulist hamburger-menulist-separate">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-cover"></div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
	background: #ddd;
	height: 64px;
	padding: 1em;
}
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}

/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 9999;
	width: 4em;
	height: 4em;
}
/* メニュー展開時のアイコンを固定 */
#hamburger-demo7:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #fafafa; /* メニューエリア背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー項目が多い場合に縦スクロール */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !importantは不要な場合あり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #333; /* メニューリスト項目の文字色 */
	display: block;
}
/* メニューエリアchecked */
	/* 右から */
#hamburger-demo7:checked ~ .hamburger-demo-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo7:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}
/* セパレート･デザイン */
	/* ハンバーガーアイコン */
.hamburger-switch-separate{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s;
	content: "";
}
.hamburger-switch-separate{
	width: 25px;
	height: 3px;
	background: #333;
}
.hamburger-switch-separate:before, .hamburger-switch-separate:after, .hamburger-demo-switch7:before, .hamburger-demo-switch7:after{
	content: "";
	position: absolute;
	width: 12.5px;
	height: 3px;
	background: #333; /* ハンバーガーアイコンの色 */
	top: 50%;
	left: 50%;
	transition: .3s;
}
.hamburger-switch-separate:before{
	transform: translate(-100%, -300%);
}
.hamburger-switch-separate:after{
	transform: translate(0, 200%)
}
.hamburger-demo-switch7:before{
	transform: translate(0, -300%);
	transition-delay: .2s;
}
.hamburger-demo-switch7:after{
	transform: translate(-100%, 200%);
	transition-delay: .2s;
}
	/* アイコンアニメーション */
#hamburger-demo7:checked ~ .hamburger-demo-switch .hamburger-switch-separate{
	width: 0;
}
#hamburger-demo7:checked ~ .hamburger-demo-switch .hamburger-switch-separate:before{
	transform: translate(-85%, -200%) rotate(45deg);
}
#hamburger-demo7:checked ~ .hamburger-demo-switch .hamburger-switch-separate:after{
	transform: translate(-15%, 100%) rotate(45deg);
}
#hamburger-demo7:checked ~ .hamburger-demo-switch7:before{
	transform: translate(-15%, -200%) rotate(-45deg);
}
#hamburger-demo7:checked ~ .hamburger-demo-switch7:after{
	transform: translate(-85%, 100%) rotate(-45deg);
}
	/* メニューリストのセパレートボーダー */
.hamburger-menulist-separate li{
	position: relative;
	margin-bottom: .5em;
}
.hamburger-menulist-separate a{
	padding: 0.5em 1em;
}
.hamburger-menulist-separate a:before, .hamburger-menulist-separate a:after, .hamburger-menulist-separate li:before, .hamburger-menulist-separate li:after{
	position: absolute;
	content: "";
	width: 2em;
	height: 1em;
	border: 1px solid;
	z-index: -1;
}
.hamburger-menulist-separate a:before{
	border-color: #333 transparent transparent #333; /* リスト項目左上ボーダー色（#333のみ変更） */
	top: 0;
	left: 0;
}
.hamburger-menulist-separate a:after{
	border-color: transparent #333 #333 transparent; /* リスト項目右下ボーダー色（#333のみ変更） */
	bottom: 0;
	right: 0;
}
.hamburger-menulist-separate li:before{
	border-color: transparent transparent #333 #333; /* リスト項目左下ボーダー色（#333のみ変更） */
	bottom: 0;
	left: 0;
}
.hamburger-menulist-separate li:after{
	border-color: #333 #333 transparent transparent; /* リスト項目右上ボーダー色（#333のみ変更） */
	top: 0;
	right: 0;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

ハンバーガーメニューを開く際、線を分離させた段階的なアニメーションを実現するために、ハンバーガーアイコンを構成する上下の線は、labelタグとspanタグの疑似要素（:before, :after）で作った２本の線を繋げて１本のように見せています。

各要素に"top: 50%; left: 50%;"を設定し、"transform: translate(○○, ○○)"で調整することにより、適切な位置に配置することが重要です。

また、メニューリストの項目を囲むカギ括弧のような線は、２辺に黒色を、残りの２辺に透明を指定してカギ括弧を表現しているため、カギ括弧の色を変更したい場合には"#333″の部分のみを変更してください。

８．斬新なハンバーガーデザイン

ハンバーガーアイコンを構成する上下の線を半分だけ描写した斬新なデザインです。

控えめなデザインで洗練されたイメージのサイトデザインに活用したいところ。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo8" type="checkbox" class="input-hidden">
		<label for="hamburger-demo8" class="hamburger-demo-switch hamburger-demo-switch8">
			<span class="hamburger-switch-half"></span>
		</label>
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-right">
			<ul class="hamburger-demo-menulist hamburger-menulist-half">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-cover"></div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
	background: #ddd;
	height: 64px;
	padding: 1em;
}
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}

/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 9999;
	width: 4em;
	height: 4em;
}
/* メニュー展開時のlabelをfixed化 */
#hamburger-demo8:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #fafafa; /* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー項目が多い場合に縦スクロール */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !importantは不要な場合あり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #333; /* メニューリスト項目の文字色 */
	display: block;
}
/* メニューエリアchecked */
	/* 右から */
#hamburger-demo8:checked ~ .hamburger-demo-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo8:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}
/* ハーフセパレート･デザイン */
	/* ハンバーガーアイコン */
.hamburger-switch-half, .hamburger-demo-switch8:before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s;
	content: "";
}
.hamburger-demo-switch8:before{
	width: 25px;
	height: 3px;
	background: #333; /* ハンバーガー中央線の色 */
}
.hamburger-switch-half:before, .hamburger-switch-half:after{
	content: "";
	position: absolute;
	width: 12.5px;
	height: 3px;
	background: #333; /* ハンバーガー上下線の色 */
	top: 50%;
	left: 50%;
	transition: .3s;
}
.hamburger-switch-half:before{
	transform: translate(-100%, -300%);
}
.hamburger-switch-half:after{
	transform: translate(0, 200%)
}
	/* アイコンアニメーション */
#hamburger-demo8:checked ~ .hamburger-demo-switch .hamburger-switch-half:before{
	transform: translate(-85%, -200%) rotate(45deg);
}
#hamburger-demo8:checked ~ .hamburger-demo-switch .hamburger-switch-half:after{
	transform: translate(-15%, 100%) rotate(45deg);
}
#hamburger-demo8:checked ~ .hamburger-demo-switch8:before{
	transform: rotate(-45deg) translate(-32%, -335%);
}
	/* メニューリストのセパレートボーダー */
.hamburger-menulist-half li{
	position: relative;
	margin-bottom: .5em;
}
.hamburger-menulist-half a{
	padding: 0.5em 1em;
}
.hamburger-menulist-half a:before, .hamburger-menulist-half a:after{
	position: absolute;
	content: "";
	width: 2em;
	height: 1em;
	border: 1px solid;
	z-index: -1;
}
.hamburger-menulist-half a:before{
	border-color: #333 transparent transparent #333; /* カギ括弧の色（#333のみ変更） */
	top: 0;
	left: 0;
}
.hamburger-menulist-half a:after{
	border-color: transparent #333 #333 transparent; /* カギ括弧の色（#333のみ変更） */
	bottom: 0;
	right: 0;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

ハンバーガーメニュー展開時に、上下の線をピッタリと合わせて１本の線に見せることがポイント。

また、中央の線との交差する点が真ん中になるよう調整することも重要になります。

ハンバーガーアイコンの大きさ（太さ･長さ）を変更する場合、"transform: translate(○○, ○○)"の値を調整し、交差のポイントを再調整する必要があります。

９．ヘッダー下に伸びるタブメニュー

ヘッダー下から引き出すようなプルダウンメニュー･デザインです。

上から引き下ろすため、横幅いっぱいのメニューリストに最適。

中央寄せ+太字で、より読みやすいメニューリストを実現できます。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

ただし、ヘッダーを最前列に表示させるための<div class="demobox-header-frontwrap">（開始タグ２行目、終了タグ４行目）に関しては、ヘッダー内への追記が必須です。

<div class="demobox-header demobox-header-front">
	<div class="demobox-header-frontwrap">
		<span class="demobox-sitename">SiteName</span>
	</div>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo9" type="checkbox" class="input-hidden">
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-pulldown">
			<label for="hamburger-demo9" class="hamburger-demo-switch hamburger-demo-switch9">
				<span class="hamburger-switch-pulldown"></span>
			</label>
			<ul class="hamburger-demo-menulist hamburger-menulist-pulldown">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
		<div class="hamburger-demo-cover"></div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダーのCSSに関しては、参考までに記載しています。

ただし、ヘッダーを最前列に表示するための“.demobox-header-frontwrap"の項目に関しては必須のCSSであるため、必ずコピペしてください。

尚、コードの先頭に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* header */
.demobox-header{
	background: #ddd; /* ヘッダーの色 */
	height: 64px;
}
	/* ヘッダーを最前列に表示 */
.demobox-header-frontwrap{
	position: relative;
		/* ！header-wrapにrelativeがポイント！ */
	z-index: 9999;
	padding: 1em;
	background: #ddd; /* 必ず色を付ける（ヘッダーと同色） */
	height: 100%;
}
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	width: 4em;
	height: 4em;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 5%;
	padding-left: 5% !important; /* !important不要な場合あり */
	list-style: none;
}
/* プルダウンメニュー */
	/* プルダウンスイッチ */
.hamburger-demo-switch9{
	position: absolute;
	background: #eee; /* プルダウンスイッチの背景色 */
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	border-radius: 50%;
	z-index: -1;
	cursor: pointer;
}
	/* スイッチの矢印マーク */
.hamburger-demo-switch9:before{
	content: "";
	position: absolute;
	width: .8em;
	height: .8em;
	border: 1.5px solid;
	border-color: transparent #333 #333 transparent; /* 矢印マークの色（#333のみ変更） */
	top: 50%;
	left: 50%;
	transform: translate(-50%, 50%) rotate(45deg);
}
#hamburger-demo9:checked ~ .hamburger-menuwrap-pulldown .hamburger-demo-switch9:before{
	transform: translate(-50%, 100%) rotate(225deg);
}
	/* メニューリストのデザイン */
.hamburger-menuwrap-pulldown{
	position: absolute;
	background: #eee; /* メニューエリアの背景色 */
	width: 100%;
	left: 0;
	bottom: calc(100% - 4em );
	padding-top: 1em;
	transition: .3s;
	z-index: 9980;
}
.hamburger-menulist-pulldown{
	text-align: center;
	font-weight: 700;
	margin-bottom: 0;
	padding-bottom: 2em !important; /* !important不要な場合あり */
	padding-top: 2em !important; /* !important不要な場合あり */
}
.hamburger-menulist-pulldown li{
	margin-bottom: .5em;
}
.hamburger-menulist-pulldown a{
	text-decoration: none;
	color: #333; /* メニューリストの文字色 */
}
	/* メニューリストのアニメーション（上から） */
#hamburger-demo9:checked ~ .hamburger-menuwrap-pulldown{
	transform: translate(0, 100%);
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

コンテンツよりは前面に表示させつつ、ヘッダーの下をくぐらせる点が重要になります。

HTMLの構文上、ハンバーガーメニューはヘッダー内に配置しておきたいため、ヘッダー内にもうひとつの要素（.demobox-header-frontwrap）を配置し、最前面に配置するためのz-indexとposition: relative;を設定しています。

尚、メニューエリアの高さやスイッチの位置は、メニュー項目が増えても自動的に調整されます。

10．円形ズームイン･メニューデザイン

ハンバーガーメニューを展開すると、画面全体に広がるようにメニューが表示されるデザインです。

ハンバーガーメニューは上から、右から、左から…という概念が定着している中、ズームイン･アニメーションは新鮮味を感じさせます。

• ハンバーガーメニューのデザインを確認

コピペ用HTMLコード

ハンバーガーメニューのコピペ用HTMLコードです。

ヘッダーやサイトタイトルのサンプルHTMLコードを含みます。

実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。

<div class="demobox-header">
	<span class="demobox-sitename">SiteName</span>
<!-- ↓ハンバーガーメニューここから↓ -->
	<div class="hamburger-demo-menubox">
		<input id="hamburger-demo10" type="checkbox" class="input-hidden">
		<label for="hamburger-demo10" class="hamburger-demo-switch hamburger-demo-switch10">
			<span class="hamburger-switch-line2"></span>
		</label>
		<div class="hamburger-demo-menuwrap hamburger-menuwrap-zoom">
			<ul class="hamburger-demo-menulist hamburger-menulist-zoom">
				<li><a href="#">メニューリスト１</a></li>
				<li><a href="#">メニューリスト２</a></li>
			</ul>
		</div>
	</div>
<!-- ↑ハンバーガーメニューここまで↑ -->
</div>

コピペ用CSSコード

ハンバーガーメニューのコピペ用デザインCSSです。

ヘッダー周りのCSSに関しては、参考までに記載しています。

コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードですので、ハンバーガーメニューのデザインCSSと共にコピペして使用することをおすすめします。

/* header（デモの参考値） */
.demobox-header{
	background: #ddd;
	height: 64px;
	padding: 1em;
}
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}

/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 9999;
	width: 4em;
	height: 4em;
}
/* メニュー展開時のハンバーガーアイコンを固定 */
#hamburger-demo10:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* 画面全体にズームインするハンバーガーメニュー */
	/* 点線のハンバーガーアイコン */
.hamburger-switch-line2, .hamburger-switch-line2:before, .hamburger-switch-line2:after{
	position: absolute;
	width: 25px;
	top: 50%;
	left: 50%;
	content: "";
	transition: .3s;
}
.hamburger-switch-line2{
	border-bottom: 3px dashed;
	transform: translate(-50%, -50%);
}
.hamburger-switch-line2:before, .hamburger-switch-line2:after{
	border-bottom: 3px solid;
}
.hamburger-switch-line2:before{
	transform: translate(-50%, -300%);
}
.hamburger-switch-line2:after{
	transform: translate(-50%, 300%);
}
	/* ハンバーガーアニメーション */
#hamburger-demo10:checked ~ .hamburger-demo-switch .hamburger-switch-line2{
	width: 0;
}
#hamburger-demo10:checked ~ .hamburger-demo-switch .hamburger-switch-line2:before{
	transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo10:checked ~ .hamburger-demo-switch .hamburger-switch-line2:after{
	transform: rotate(-45deg) translate(-40%, -325%);
}
	/* メニューエリア */
.hamburger-menuwrap-zoom{
	position: fixed;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fafafa; /* メニューエリア背景色 */
	z-index: 9998;
	border-radius: 50%;
	visibility: hidden;
	transition: .3s;
	overflow: hidden;
}
.hamburger-menulist-zoom{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合あり */
	list-style: none;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding: 0 !important; /* !important不要な場合あり */
	font-weight: 400;
	transition: .3s;
}
.hamburger-menulist-zoom li{
	margin-bottom: .5em;
}
.hamburger-menulist-zoom a{
	font-size: 0;
	text-decoration: none;
	color: #333; /* メニューリスト文字色 */
	opacity: 0;
	transition: .3s;
}
	/* メニューエリアアニメーション */
#hamburger-demo10:checked ~ .hamburger-menuwrap-zoom{
	width: 200%;
	height: 200%;
	visibility: visible;
}
#hamburger-demo10:checked ~ .hamburger-menuwrap-zoom .hamburger-menulist-zoom a{
	font-size: 16px;
	font-weight: 700;
	opacity: 1;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger-demo-menubox{
		display: none;
	}
}

コードのポイントと注意点

丸くズームインするよう"border-radius: 50%;"を設定しているため、ハンバーガーメニュー展開時におけるメニューエリアの横幅･高さは、画面の2倍（200%）に設定します。

また、文字サイズはブラウザ側で下限（10px）が設定されている場合があるため、アニメーションがよりスムーズに見えるよう、文字のopacityを変化させています。

メニューは常に画面中央に待機していることになるため、非表示時には"visibility: hidden;"を設定することで、コンテンツへの干渉を防ぐことがポイントです。

ハンバーガーメニューでサイト･デザインをおしゃれに

以上、「コピペCSSで導入するレスポンシブ対応のおしゃれなハンバーガーメニュー･デザイン」のご紹介でした。

ハンバーガーメニューは、サイトに訪れた人が最初に目にするヘッダー部分に位置します。

サイトのデザイン性に大きく関わるパーツだからこそ、おしゃれなデザインでおもてなししたいものです。

ヘッダーのサイズによっては、CSSのコピペに加えて細部の調整が必要になる場合があります。

コーディングの知識がない方や、細かな調整が難しい場合には、お問い合わせページよりSTALDIAまでご相談ください。