【HTML,CSS,JavaScript】5分でハンバーガーメニューを導入する方法
ここでは、ハンバーガーメニューを導入する方法を解説します。
ハンバーガーメニューの導入は、既にWebサイトを準備していれば5分程度で終わるかと思います。
こういった方へ向けた記事です
①ハンバーガーメニューを追加する方法を知りたい
②ポートフォリオにハンバーガーメニューを導入したい
③ハンバーガーメニューの案件を獲得するために導入方法を知りたい
目次 1.ハンバーガーメニューとは 2.ハンバーガーメニュー導入方法 3.マテリアルアイコン使用方法
1.ハンバーガーメニューとは
下記のような3つの横線のアイコンをクリックするとメニューが開かれ、バツをクリックするとメニューが閉じられる。この機能を3つの横線がハンバーガーに似ていることからハンバーガーメニューと呼ばれる。最近のスマートフォンサイトには多いイメージ。


2.ハンバーガーメニュー導入方法
下記を参考にしてください。大事な箇所は赤い文字にしてあります。(※スマホだと赤くなっていないかもしれませんので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');
});
}
3.マテリアルアイコン使用方法
上記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フファイルにペーストする。
誰かの参考になれば幸いです。