ハンバーガーメニューCSS ｜コード星人プログラマン

ハンバーガーメニュー

ハンバーガーメニューとは

これが通称ハンバーガーメニューだ。

基本的には三本の黒い棒で表しているナビゲーションメニューみたいな感じ。

スマホ版のメニューで使われている印象である。

この三本線を押すとメニューが表示される。

パソコンサイトだとあんま見たことない。

簡単なやつだとHTMLとCSSで作ることが可能。

ハンバーガーメニューの作り方

作るうえで使う言語はHTMLとCSSだ。

普通だとJavaScriptを使うらしい。

//パソコン版のナビゲーション
<div id="pc_nav">
　　　　<ul>
　　　　　　　　　　　　<li><a href="#">コース紹介</a></li>
　　　　　　　　　　　　<li><a href="#">沿革</a></li>
　　　　　　　　　　　　<li><a href="#">スタッフ</a></li>
　　　　　　　　　　　　<li><a href="#">実績</a></li>
　　　　　　　　　　　　<li><a href="#">お問い合わせ</a></li>
　　　　</ul>
</div>

//スマホ版のナビゲーション
<div id="sp_nav">
　　　　<input type="checkbox" id="input">
　　　　<label for="input">
　　　　　　　　<div class="line"></div>
　　　　　　　　<div class="line"></div>
　　　　　　　　<div class="line"></div>
　　　　</label>

　　　　<div id="nav_content">
　　　　　　　　<ul>
　　　　　　　　　　　　<li><a href="#">コース紹介</a></li>
　　　　　　　　　　　　<li><a href="#">沿革</a></li>
　　　　　　　　　　　　<li><a href="#">スタッフ</a></li>
　　　　　　　　　　　　<li><a href="#">実績</a></li>
　　　　　　　　　　　　<li><a href="#">お問い合わせ</a></li>
　　　　　　　　</ul>
　　　　</div>
</div>

//パソコン版のナビゲーション

　　　　<ul>

　　　　　　　　　　　　<li><a href="#">コース紹介</a></li>

　　　　　　　　　　　　<li><a href="#">お問い合わせ</a></li>

　　　　</ul>

</div>

//スマホ版のナビゲーション

　　　　</label>

　　　　　　　　<ul>

　　　　　　　　　　　　<li><a href="#">コース紹介</a></li>

　　　　　　　　　　　　<li><a href="#">お問い合わせ</a></li>

　　　　　　　　</ul>

　　　　</div>

/*pc版のnavを非表示にする*/	
#pc_nav{
	display:none;
}

/*sp版を表示して右上で固定している状態にする*/	
#sp_nav{
	display:block;
	position:fixed;
	top:0;
	right:0;
	z-index:2;
	margin-top:20px;
}
	
/*checkboxを非表示にする*/
#sp_nav input{
	display:none;
}
	
/*三本線を空のdiv三つで作る*/
.line{
	width:20px;
	height:3px;
	background-color:#000000;
	margin:6px 0 0 70px;
}
	
/*開いた時のコンテンツの見た目と隠し方transformを使って右に100pxずらすと画面外へ*/
#nav_content{
	width:100px;
	height:100vh;
	transform:translateX(100px);
	background-color:#f0f0f0;
}
	
#nav_content ul li{
	margin:10px 0;
}
	
input:checkedされたら直後の#nav_contentが表示される
input:checked~#nav_content{
	transform:translateX(0px);
}

#sp_nav #nav ul li a,#sp_nav #nav ul li a:link,#sp_nav #nav ul li a:visited{
	color:#000000;
}
	
#sp_nav #nav ul li a:hover{
	color:#ed1c1c;
}

/*pc版のnavを非表示にする*/

#pc_nav{

display:none;

}

/*sp版を表示して右上で固定している状態にする*/

#sp_nav{

display:block;

position:fixed;

top:0;

right:0;

z-index:2;

margin-top:20px;

}

/*checkboxを非表示にする*/

#sp_nav input{

display:none;

}

/*三本線を空のdiv三つで作る*/

.line{

width:20px;

height:3px;

background-color:#000000;

margin:6px 0 0 70px;

}

/*開いた時のコンテンツの見た目と隠し方transformを使って右に100pxずらすと画面外へ*/

#nav_content{

width:100px;

height:100vh;

transform:translateX(100px);

background-color:#f0f0f0;

}

#nav_content ul li{

margin:10px 0;

}

input:checkedされたら直後の#nav_contentが表示される

input:checked~#nav_content{

transform:translateX(0px);

}

#sp_nav #nav ul li a,#sp_nav #nav ul li a:link,#sp_nav #nav ul li a:visited{

color:#000000;

}

#sp_nav #nav ul li a:hover{

color:#ed1c1c;

}

内容はコード内にコメントアウトしてあるからそれを参考に。

色をいじりたい人は

CSSのbackground-colorとcolorの16進数をいじれば変えられる。

ちゃんとviewportとメディアスクリーンを使わないと表示が崩れるので注意してください。