【HTML,CSS,JavaScript】5分でハンバーガーメニューを導入する方法
ここでは、ハンバーガーメニューを導入する方法を解説します。
ハンバーガーメニューの導入は、既にWebサイトを準備していれば5分程度で終わるかと思います。
こういった方へ向けた記事です
①ハンバーガーメニューを追加する方法を知りたい
②ポートフォリオにハンバーガーメニューを導入したい
③ハンバーガーメニューの案件を獲得するために導入方法を知りたい
目次 １．ハンバーガーメニューとは ２．ハンバーガーメニュー導入方法 ３．マテリアルアイコン使用方法
１．ハンバーガーメニューとは
下記のような3つの横線のアイコンをクリックするとメニューが開かれ、バツをクリックするとメニューが閉じられる。この機能を3つの横線がハンバーガーに似ていることからハンバーガーメニューと呼ばれる。最近のスマートフォンサイトには多いイメージ。
２．ハンバーガーメニュー導入方法
下記を参考にしてください。大事な箇所は赤い文字にしてあります。（※スマホだと赤くなっていないかもしれませんのでPC推奨）
HTML（index.html）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!--スマートフォン対応サイトなのでviewportを設定--> <!--content属性では幅をデバイスの幅にする--> <!--最初の倍率を等倍にする--> <meta name="viewport" content="width=devise-width, initial-scale=1"> <title>ハンバーガーメニューテストプログラム</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <div class="logo"> <h1>LOGO</h1> </div> <div class="pc-menu"> <nav> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> </ul> </nav> </div> <div class="sp-menu"> <span class="material-icons" id="open">menu</span> </div> </header> <div class="overlay"> <span class="material-icons" id="close">close</span> <nav> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> </ul> </nav> </div> <main> <p>どうも、フリーランスエンジニアのカシムラです。</p> </main> <script src="js/main.js"></script> </body> </html>
CSS（styles.css）
body {
margin: 0;
font-family: :Verdana, sans-serif;
}
header {
display: flex;
padding: 0;
}
header h1 {
margin: 0;
font-size: 22px;
line-height:64px;
}
.sp-menu {
margin-left: auto;
}
.sp-menu #open {
font-size: 32px;
line-height: 64px;
cursor: pointer;
}
.sp-menu #open.hide {
display: none;
}
main {
padding: 0 16px;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(255,255,255, 0.95);
text-align: center;
padding: 64px;
opacity: 0;
pointer-events: none;
transition: opacity .6s; /* アニメーション */
}
.overlay.show {
opacity: 1;
pointer-events: auto;
}
.overlay #close {
position: absolute;
top: 16px;
right: 16px;
font-size:32px;
cursor: pointer;
}
.overlay ul {
list-style-type: none;
margin-left: 0;
padding: 0;
}
.overlay li {
margin-top: 24px;
opacity: 0;
transform: translate(16px);
transition: opacity .3s, transform .3s;
}
.overlay.show li {
opacity: 1;
transform: none;
}
.overlay.show li:nth-child(1) {
transition: .1s;
}
.overlay.show li:nth-child(2) {
transition: .2s;
}
.overlay.show li:nth-child(3) {
transition: .3s;
}
.pc-menu {
display: none;
}
@media (min-width: 600px) {
.pc-menu {
display: block;
margin-left: auto;
}
.pc-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.pc-menu a {
display: block;
width: 80px;
line-height: 64px;
text-align: center;
}
.pc-menu a:hover {
background: #ff0000;
}
.sp-menu {
display: none;
}
}
JavaScript（main.js）
'use strict';
{
const open = document.getElementById('open');
const overlay = document.querySelector('.overlay');
const close = document.getElementById('close');
open.addEventListener('click', () => {
overlay.classList.add('show');
open.classList.add('hide');
});
close.addEventListener('click', () => {
overlay.classList.remove('show');
open.classList.remove('hide');
});
}
３．マテリアルアイコン使用方法
上記2ではマテリアルアイコンを使用してハンバーガーメニューを実現しています。
今回使用しているマテリアルは、「3本の横線」と「バツ」のアイコンです。
それらを導入する方法を解説します。
(1)「Material Icons Guide」（https://google.github.io/material-design-icons/）のホームページを起動する。
(2)「Icon fotnts for the web」をクリックする。
(3)「link ～」の箇所をコピーし、htmlファイルにペーストする。
上記2だとこのようになっている。
<title>ハンバーガーメニューテストプログラム</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
(4)同じページ内の上部に「Material Icons Library」があるのでクリックする。
(5)「Filter by name」の欄に「menu」と入力すると、アイコンの候補が表示される。
(6)「menu」アイコンをクリックし、「Selected Icon」をクリックする。
(7)htmlタグの部分をコピーし、htmlファイルにペーストする。
(8)同じように「Filter by name」の欄に「close」と入力すると、アイコンの候補が表示されるので、コピーしてhtmlフファイルにペーストする。
誰かの参考になれば幸いです。
