【Javascript】ハンバーガーメニューを作ってみよう
今回は「ハンバーガーメニュー」の実装例をメモしていきたいと思います。作り方は他にも色々あるとは思いますが、今回はJavascriptを使用したシンプルなハンバーガーメニューを作ってみたいと思います。
目次
そもそも「ハンバーガーメニュー」ってなに？
ここで「ハンバーガーメニュー」という言葉にピンときていない人もいるかもしれないので確認しておきます。
画像の三本線が「ハンバーガーメニュー」と呼ばれるものです。このボタンをクリックすることで隠れていたグローバルメニューが開き、各ページに飛ぶことができます。
スマホサイズの等の小さな画面でよく使用され、サイトの利便性を向上させるために使用されます。ちなみにハンバーガーメニューという名称は、そのまんまハンバーガーに似ているという理由から来ているらしいですね（本当なのか？）。
今回はこのハンバーガーメニューをタップすると、右画面外から現れるメニューをJavascriptを使用して作成してみます。
ハンバーガーメニュー作成の一例
See the Pen
GRopEdB by egg (@egg0522sei)
on CodePen.
いきなりですが完成形を見てましょう。こんな感じで右上にあるハンバーガーメニューを押すと右からメニューが現れます。そしてメニューの「×」ボタンを押すと、今度はメニューが隠れます。
HTML、CSS、Javascriptというそれぞれの言語が役割を担い、このような動作を実行しています。
各言語ごとの役割それぞれ解説していきます。
各要素の解説
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ハンバーガーメニュー</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="asset/reset.css"> <link rel="stylesheet" href="asset/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body class="menu-open"> <i class="fa fa-bars" id="show"></i> <h1>ハンバーガーメニューを作ろう</h1> <p>てすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですお</p> <p>てすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですお</p> <p>てすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですお</p> <p>てすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですお</p> <p>てすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですお</p> <p>てすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですお</p> <p>てすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですおてすとですお</p> <div id="cover"></div> <!---------------------menu---------------------------------------> <div id="menu"> <i class="fa fa-times" id="hide"></i> <ul class="list"> <li>HOME</li> <li>ABOUT</li> <li>DIARY</li> <li>MENU</li> <li>LINK</li> </ul> </div> <!---------------------menu---------------------------------------> <script type="text/javascript" src="asset/javascript.js"> </script> </body> </html> |
それぞれを分解してみていきましょう。
本文部分
|
1 2 3 4 |
<body class="menu-open"> <i class="fa fa-bars" id="show"></i> //**ハンバーガーメニューボタン <h1>ハンバーガーメニューを作ろう</h1> <p>略</p> |
他には「<i class=”fa fa-bars” id=”show”></i>」でハンバーガーメニューを表示しています。今回はfontawesomeによってこのボタンを表示しているので、<head>タグ内に
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> |
それでは次のパーツを見てみます。
黒いカバー部分
|
1 |
<div id="cover"></div> |
それでは次に最後のパーツです。
メニュー部分
|
1 2 3 4 5 6 7 8 9 10 |
<div id="menu"> <i class="fa fa-times" id="hide"></i> <ul class="list"> <li>HOME</li> <li>ABOUT</li> <li>DIARY</li> <li>MENU</li> <li>LINK</li> </ul> </div> |
忘れてはならないのが「<i class=”fa fa-times” id=”hide”></i>」の「×」ボタン、メニューを閉じるボタンですね。idは「hide」としておきます。
HTMLのそれぞれのパーツ確認
- 本文部分
- 黒いカバー
- メニュー
HTMLは大きくこの3つのパーツから成り立っています。続いてはＣＳＳを見ていきましょう。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
body{ margin: 0; font-family:Verdana,sans-serif; background:#eee; top:0; left:0; color:#333; padding:8px; box-sizing:border-box; width: 100%; height: 100%; overflow-x:hidden; } #cover{ background:#000; opacity:0.6; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; display:none; } #menu{ z-index:2; position:absolute; top:0; right:-180px; color:#fff; background:#ec81e9; padding:8px; padding-left:20px; box-sizing:border-box; width:180px; min-height:100%; transition:.4s; } .list li{ list-style-type:square; } #show, #hide{ float:right; cursor:pointer; } body.menu-open{ overflow-y:hidden; } body.menu-open #cover{ display:block; } body.menu-open #menu{ right:0; } |
body
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body{ margin: 0; font-family:Verdana,sans-serif; background:#eee; top:0; left:0; color:#333; padding:8px; box-sizing:border-box; width: 100%; height: 100%; overflow-x:hidden; } |
cover
|
1 2 3 4 5 6 7 8 9 10 11 |
#cover{ background:#000; opacity:0.6; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; display:none; } |
z-index:1;、これはメニューが黒いカバーより下に重ならないようにするために設定しています。
そしてdisplay:none;によって、通常は非表示にしておきます。このdisplay:none;をdisplay:block;にすることで、表示・非表示を切り替えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#menu{ z-index:2; position:absolute; top:0; right:-180px; color:#fff; background:#ec81e9; padding:8px; padding-left:20px; box-sizing:border-box; width:180px; min-height:100%; transition:.4s; } |
widthはメニューの横幅を設定していますが、注意すべきはこのwidthで設定した数値分、rigthにマイナスとして設定する事です。これによりメニューが画面外に隠れるようになります。rigthの値が0のとき、メニューが画面右からひょっこり現れるんですね。
|
1 2 3 4 5 6 7 8 9 10 11 |
body.menu-open{ overflow-y:hidden; } body.menu-open #cover{ display:block; } body.menu-open #menu{ right:0; } |
|
1 2 3 |
body.menu-open{ overflow-y:hidden; } |
これはメニューが表示されている間、縦にスクロールしないようにしています。
|
1 2 3 |
body.menu-open #cover{ display:block; } |
黒いカバーを「display:none;」から「display:block;」に変えることで、表示させています。
|
1 2 3 |
body.menu-open #menu{ right:0; } |
画面外に隠れていたメニューを移動させて表示しています。
Javascript
さあいよいよ最後、Javascriptの記述を見ていきましょう。といってもコード自体はすごくシンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// JavaScript Document 'use strict'; (function(){ var show = document.getElementById('show'); var hide = document.getElementById('hide'); show.addEventListener('click',function(){ document.body.className = 'menu-open'; }); hide.addEventListener('click',function(){ document.body.className = ''; }); })(); |
変数「show」、変数「hide」にそれぞれ、「show」と「hide」のidがついている要素を取得する記述をいれています。
showのidがついた要素をクリックした時の動作
|
1 2 3 |
show.addEventListener('click',function(){ document.body.className = 'menu-open'; }); |
hideのidがついた要素をクリックした時の動作
|
1 2 3 |
hide.addEventListener('click',function(){ document.body.className = ''; }); |
この二つの動作によって、body要素のclassを付けたり消したりして、「men-open」のクラスがついている時と、ついていない時の動作を変化させているんですね。
まとめ
はい、少々長くなってしまいましたが、今回はCSSとJavascriptを使用したハンバーガーメニュー実装の一例でした。
他にも色々と方法があるみたいなので、色々な方法で実装を試してみるのもいいと思います。
それではお疲れ様でした(・ω・)ノシ
