【CSS】チェックボックスの機能を利用してCSSのみで作るハンバーガーメニュー

レッスン

ハンバーガーメニューはCSSだけでも作る事ができます。少々複雑なので、一番簡単なソースを紹介します。

HTML
<div id="hamburger">
    <input id="hamburger-checkbox" type="checkbox">
    <label id="hamburger-icon" for="hamburger-checkbox"><span></span></label>
    <label id="hamburger-close" for="hamburger-checkbox"></label>
    <div id="hamburger-content">
        <p>メニュー等が入る</p>
    </div>
</div>

HTMLはinputタグのチェックボックスを利用する

inputタグのチェックボックスのチェックがされているかどうかをCSS側で見て表示を切り替える、といった作りになっています。重要なのは、labelタグのfor属性の値をinputタグのid属性の値と同じにしてチェックボックスを紐づける事です。

HTML
<div id="hamburger">
    <input id="hamburger-checkbox" type="checkbox">
 
    /*labelタグにinputのidの値を紐付ける*/
    <label id="hamburger-icon" for="hamburger-checkbox"><span></span></label>
    <label id="hamburger-close" for="hamburger-checkbox"></label>
 
    <div id="hamburger-content">
        <p>メニュー等が入る</p>
    </div>
</div>

右上にハンバーガーメニューを設置

まずは右上にハンバーガーメニューを設置します。今回はfixedで右上に追随させます。

また、チェックボックスは機能のみを利用するのでdisplay:noneで非表示にします。

CSS
/*-----右上にハンバーガーメニューを設置-----*/
/*ハンバーガーメニューの設置場所*/
#hamburger {
	position: fixed;
	top: 0;
	right: 0;
}
 
/*チェックボックスは非表示にする*/
#hamburger-checkbox {
	display: none;
}
 
/*ハンバーガーメニューの外側*/
#hamburger-icon {
	display: block;
	background-color: #999;
	width: 60px;
	height: 60px;
 
	/*ハンバーガーメニューのバー用*/
	position: relative;
}

ハンバーガーメニューを装飾

spanタグを利用して3本の線を作成します。真ん中の場合を天地中央に設置し、擬似クラスbeforeとafterで上下にも線を作成します。

この時、デフォルトだとホバー時にカーソルが変わらないので「cursor: pointer」でホバー時に変化をつけます。

CSS
/*-----ハンバーガーメニューを装飾-----*/
/*ハンバーガーメニューのバー*/
#hamburger-icon span,
#hamburger-icon span::before,
#hamburger-icon span::after {
	background-color: #fff;
	width: 40px;
	height: 5px;
	content: "";
	display: block;
	position: absolute;
}
 
/*真ん中バー*/
#hamburger-icon span {
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
 
/*下バー*/
#hamburger-icon span::before {
	bottom: 15px;
}
 
/*上バー*/
#hamburger-icon span::after {
	top: 15px;
}
 
/*ホバーした時の動作*/
#hamburger-icon:hover {
	cursor: pointer;
}

メニューの中身を作成する

メニューの中身を作成します。初期状態では横幅と同じマイナス値を与え、隠しておきます。

CSS
/*-----メニューの中身を作成する-----*/
/*メニュー自体の中身*/
#hamburger-content {
	position: fixed;
	top: 0;
	padding:20px;
 
	/*マイナス値で隠しておく*/
	left: -40%;
	width: 40%;
	height: 100%;
	background-color: #fff;
}

メニューの中身以外のクリックは閉じるようにする

チェックした状態からチェックを外す状態をあらかじめ用意します。メニューの中身以外に「#hamburger-close」が背景に敷かれている状態を想定します。初期状態では「display:none」で隠しておきます。

CSS
/*-----メニューの中身以外のクリックは閉じるようにする-----*/
/*閉じるクリック領域*/
#hamburger-close {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
 
	/*noneで隠しておく*/
	display: none;
}

チェックボックスがチェックされている時の動作を作成する

今回、セレクタとセレクタの間を「~（ほにゃらら？波線？）」でつなげています。
これは、間接セレクタと呼ばれ、この「~」は、その要素以降にある要素を指定する事ができます。

この間接セレクタ「~」を利用してチェック時の動作を設計していきます。

CSS
/*-----チェックボックスがチェックされている時の動作を作成する-----*/
/*間接セレクタ「~」を利用する*/
/*間接セレクタ「~」は、その要素以降にある要素を指定する事ができる*/
 
/*ハンバーガーメニューの外側*/
#hamburger-checkbox:checked~#hamburger-icon {
	background: #000;
}
 
/*真ん中バー*/
#hamburger-checkbox:checked~#hamburger-icon span {
	background: rgba(255, 255, 255, 0);
}
 
/*下バー*/
#hamburger-checkbox:checked~#hamburger-icon span::before {
	bottom: 0;
	transform: rotate(-45deg);
}
 
/*上バー*/
#hamburger-checkbox:checked~#hamburger-icon span::after {
	top: 0;
	transform: rotate(45deg);
}
 
/*ハンバーガーメニュー開いた中身・座標を0で表示*/
#hamburger-checkbox:checked~#hamburger-content {
	left: 0;
}
 
/*メニュー以外の領域を表示（透明）*/
#hamburger-checkbox:checked~#hamburger-close {
	display: block;
}
/*ここまで*/

最終的な状態はこちら

上記の説明をまとめた状態が下記です。

HTML
<div id="hamburger">
    <input id="hamburger-checkbox" type="checkbox">
    <label id="hamburger-icon" for="hamburger-checkbox"><span></span></label>
    <label id="hamburger-close" for="hamburger-checkbox"></label>
    <div id="hamburger-content">
        <p>メニュー等が入る</p>
    </div>
</div>
/*-----右上にハンバーガーメニューを設置-----*/
/*ハンバーガーメニューの設置場所*/
#hamburger {
	position: fixed;
	top: 0;
	right: 0;
}
 
/*チェックボックスは非表示にする*/
#hamburger-checkbox {
	display: none;
}
 
/*ハンバーガーメニューの外側*/
#hamburger-icon {
	background-color: #999;
	width: 60px;
	height: 60px;
	display: block;
 
	/*ハンバーガーメニューのバー用*/
	position: relative;
}
 
 
/*-----ハンバーガーメニューを装飾-----*/
/*ハンバーガーメニューのバー*/
#hamburger-icon span,
#hamburger-icon span::before,
#hamburger-icon span::after {
	background-color: #fff;
	width: 40px;
	height: 5px;
	content: "";
	display: block;
	position: absolute;
}
 
/*真ん中バー*/
#hamburger-icon span {
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
 
/*下バー*/
#hamburger-icon span::before {
	bottom: 15px;
}
 
/*上バー*/
#hamburger-icon span::after {
	top: 15px;
}
 
/*ホバーした時の動作*/
#hamburger-icon:hover {
	cursor: pointer;
}
 
 
/*-----メニューの中身を作成する-----*/
/*メニューの中身*/
#hamburger-content {
	position: fixed;
	top: 0;
	padding:20px;
 
	/*マイナス値で隠しておく*/
	left: -40%;
	width: 40%;
	height: 100%;
	background-color: #fff;
}
 
 
/*-----メニューの中身以外のクリックは閉じるようにする-----*/
/*閉じるクリック領域*/
#hamburger-close {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
 
	/*noneで隠しておく*/
	display: none;
}
 
/*-----チェックボックスがチェックされている時の動作を作成する-----*/
/*間接セレクタ「~」を利用する*/
/*間接セレクタ「~」は、その要素以降にある要素を指定する事ができる*/
 
/*ハンバーガーメニューの外側*/
#hamburger-checkbox:checked~#hamburger-icon {
	background: #000;
}
 
/*真ん中バー*/
#hamburger-checkbox:checked~#hamburger-icon span {
	background: rgba(255, 255, 255, 0);
}
 
/*下バー*/
#hamburger-checkbox:checked~#hamburger-icon span::before {
	bottom: 0;
	transform: rotate(-45deg);
}
 
/*上バー*/
#hamburger-checkbox:checked~#hamburger-icon span::after {
	top: 0;
	transform: rotate(45deg);
}
 
/*ハンバーガーメニュー開いた中身・座標を0で表示*/
#hamburger-checkbox:checked~#hamburger-content {
	left: 0;
}
 
/*メニュー以外の領域を表示（透明）*/
#hamburger-checkbox:checked~#hamburger-close {
	display: block;
}
/*ここまで*/

上記は最低限の記述しかしていないので、ホバーでボタンの色の変更や、transitionでアニメーション等を利用してより魅力的なインターフェースに変更してください。

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー（フリー）/ WEB講師（非常勤）/ 海外販売（法人）他

お仕事のご相談はお問い合わせフォームへお願いします。