ハンバーガーメニュー、コピペでもいいけど、自分で作れるようになりたい！
この記事ではハンバーガーメニューを1から作る方法を解説しています。
オリジナルのハンバーガーメニューを作れるように丁寧なコード解説をしていますので、一緒に作ってみましょう！
ハンバーガーメニューとは（コピペで使えるコードあり）
ハンバーガーメニューとは、ホームページでよく見かける三本線のマークのことを言います。
3つの線がハンバーガーのように見えますよね。
クリックするとメニューが表示されます。
ハンバーガーメニューは、スマートフォンやタブレットなどのモバイルデバイスで、画面のスペースが限られている場合や、ユーザーに一度に多くの情報を表示したくない場合によく使われます。
コピペしたい方のために最初にコード全文を載せておきます。
▼HTML
<body>
<div class="mask"></div>
<header>
<a class="hamburger_btn">
<span></span>
<span></span>
<span></span>
</a>
</header>
<nav class="nav">
<ul>
<li><a href="menu1">menu1</a></li>
<li><a href="menu2">menu2</a></li>
<li><a href="menu3">menu3</a></li>
</ul>
</nav>
</body>▼CSS
.hamburger_btn{
width: 60px;
height: 60px;
position: fixed;
top: 20px;
right: 20px;
z-index: 3;
}
.hamburger_btn span{
width: 50px;
height: 3px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
transition: .7s;
}
.hamburger_btn span:nth-of-type(1){
transform: translate(-50%,-20px);
}
.hamburger_btn span:nth-of-type(3){
transform: translate(-50%,20px);
}
.hamburger_btn.active span:nth-of-type(1){
transform: rotate(45deg) translate(-50%,0);
transform-origin: 0% 50%;
}
.hamburger_btn.active span:nth-of-type(2){
opacity: 0;
}
.hamburger_btn.active span:nth-of-type(3){
transform: rotate(-45deg) translate(-50%,0);
transform-origin: 0% 50%;
}
.nav{
position: fixed;
top: 0;
right: 0;
z-index: 2;
padding: 100px 20px 20px 20px;
background-color: #fff;
transform: translateX(100%);
transition: .7s;
overflow: auto;
}
.nav.active{
transform: translateX(0);
}
.nav ul li{
list-style: none;
}
.nav ul li a{
text-decoration: none;
}
.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
visibility: hidden;
transition: .7s;
z-index: 1;
}
.mask.active{
opacity: 0.7;
visibility: visible;
}▼jQuery
$(function(){
$(".hamburger_btn").on("click",function(){
$(this).toggleClass("active");
$(".nav").toggleClass("active");
$(".mask").toggleClass("active");
});
});では、実際に作ってみましょう！
ハンバーガーメニュー作成の流れ
ハンバーガーメニューの作成を5STEPにわけて、一つずつ解説します。
作成の流れは以下の通りです。
STEP1.三本線を作る
↓
STEP2.バツ印を作る
↓
STEP3.jQueryで切り替える
↓
STEP4.メニューを作る
↓
STEP5.背景を入れる
1.三本線を作る
まず三本線から作っていきましょう！
HTMLにdivを入れ、その中にspanタグを3つ追加します。
このspanタグが三本線になります。
classはなんでもいいですが、hamburger_btnにしておきましょう。
これをheaderの中に書きます。
コードは以下の通りです。
▼HTML
<header>
<div class="hamburger_btn">
<span></span>
<span></span>
<span></span>
</div>
</header>次にCSSで三本線を表示する土台になるdivを装飾していきましょう。
四角を作って右上に固定します。
コードは以下の通りです。
▼CSS
.hamburger_btn{
width: 60px; /*幅*/
height: 60px; /*高さ*/
position: fixed; /*位置を固定する*/
top: 20px; /*上からの距離*/
right: 20px; /*右からの距離*/
z-index: 3; /*下図で解説*/
}「z-index: 3;」とは下から重ねて3番目に表示するということです。
今回のハンバーガーメニューでは3つの要素を重ねるので1番上にするために3を指定しています。
たくさんの要素がある中で1番上に表示したいというときは99など大きな数字を指定することもできます。
今回重ねる要素は以下の図の通りです。
次は今作成した四角の中にCSSで線を作りましょう。
線の長さと太さ、色などを決めます。
コードは以下の通りです。
▼CSS
.hamburger_btn span{
width: 50px; /*線の長さ*/
height: 3px; /*線の太さ*/
background-color: #000; /*線の色*/
position: absolute; /*四角の上に表示する*/
top: 50%; /*四角の上から半分の位置*/
left: 50%; /*四角の左から半分の位置*/
transform: translateX(-50%); /*左に半分の半分戻す*/
transition: .7s; /*線の動く速度*/
}transform: translateX(-50%);って？と思いましたか。
left: 50%;だけでブラウザを見るとわかりますが、線の左端を50％右に移動しているので、中心から線が始まっていることになります。
それを移動した線の半分マイナスにすることで中央に表示させています。
transition: .7s;は線が三本線からバツ印に変わる速度です。
sは秒ですので、この場合は0.7秒で変化することになります。
これで線の形ができましたね。
しかし、まだこのままでは、同じ位置に線が三本とも重なっていますので、ずらしましょう。
一本目を上に、三本目を下に移動させます。
コードは以下の通りです。
▼CSS
.hamburger_btn span:nth-of-type(1){
transform: translate(-50%,-20px);
}
.hamburger_btn span:nth-of-type(3){
transform: translate(-50%,20px);
}
nth-of-typeでspanタグの何番目かを指定しています。
先ほどのコードにtransformを上書きしているので、再度左にleft: 50%;の半分移動させ、それぞれ上下に20pxずつずらしています。
2.バツ印を作る
三本線ができたので、バツ印を作っていきましょう。
三本線とバツ印の切り替えはjQueryで行います。
hamburger_btnクラスにactiveクラスをつけたり消したりすることで、切り替えます。
ですので、バツ印はactiveクラスを付けたCSSにします。
コードは以下の通りです。
▼CSS
.hamburger_btn.active span:nth-of-type(1){
transform: rotate(45deg) translate(-50%,0); /*斜め45度にする*/
transform-origin: 0% 50%; /*回転の起点は左端*/
}
.hamburger_btn.active span:nth-of-type(2){
opacity: 0; /*透明にする*/
}
.hamburger_btn.active span:nth-of-type(3){
transform: rotate(-45deg) translate(-50%,0);/*マイナスに斜め45度にする*/
transform-origin: 0% 50%; /*回転の起点は左端*/
}個人的にtransform-originを理解するのがなかなか難しかったです。
わからなかったらコピペで一旦進めましょう。
まずは完成させて「できた！」と実感することが挫折しないコツです。
3.jQueryで切り替える
三本線とバツ印ができたので、jQueryで切り替えましょう。
先ほど少し紹介した通り、activeクラスをつけたり消したりして切り替えます。
hamburger_btnをクリックしたらactiveクラスを付けるという条件を書きましょう。
コードは以下の通りです。
▼jQuery
$(function(){
$(".hamburger_btn").on("click",function(){
$(this).toggleClass("active");
});
});これでクリックするたびに三本線とバツ印が切り替わるボタンができましたね。
4.メニューを作る
ボタンができたので、表示したいメニューを作っていきましょう。
今回は「menu1」「menu2」「menu3」としておきますね。
まずはHTMLからです。
ヘッダーの下に追加しましょう。
▼HTML
<nav class="nav">
<ul>
<li><a href="menu1">menu1</a></li>
<li><a href="menu2">menu2</a></li>
<li><a href="menu3">menu3</a></li>
</ul>
</nav>次にメニューをCSSで装飾します。
▼CSS
.nav{
position: fixed; /*位置を固定する*/
top: 0; /*上からの距離*/
right: 0; /*右からの距離*/
z-index: 2; /*下から2番目に表示する*/
padding: 100px 20px 20px 20px; /*メニューの内側の余白*/
background-color: #fff; /*メニューの背景色*/
transform: translateX(100%); /*右に100%で画面外に表示*/
transition: .7s; /*動く速度*/
overflow: hidden; /*画面外にはみ出したものを非表示*/
}
.nav ul li{
list-style: none; /*リストの・を消す*/
}
.nav ul li a{
text-decoration: none; /*リンクの下線を消す*/
}画面外に表示されるようにしたので、ブラウザを見てもメニューが見えなくなりましたね。
このメニューもactiveクラスを使って画面内に出てくるように切り替えましょう。
追加するCSSは以下の通りです。
▼CSS
.nav.active{
transform: translateX(0);
}画面外に表示していたメニューをもとの位置に戻すだけです。
クラスを切り替えるため、jQueryも追加しましょう。
▼jQuery
$(function(){
$(".hamburger_btn").on("click",function(){
$(this).toggleClass("active");
$(".nav").toggleClass("active"); /*←追加*/
});
});これでボタンをクリックするとメニューが表示され、もう一度クリックすると消えるようになりました。
5.背景を入れる
このままでも良いのですが、メニューを表示するときに背景を暗くするとメニューが見やすくオシャレですよね。
同じようにjQueryで切り替える背景を追加しましょう。
▼HTML
/*ヘッダーの上に追加*/▼CSS
.mask{
position: fixed; /*位置を固定する*/
top: 0; /*上からの距離*/
left: 0; /*左からの距離*/
width: 100%; /*幅を画面いっぱいに*/
height: 100%; /*高さを画面いっぱいに*/
background-color: #000; /*背景色を指定*/
opacity: 0; /*透明にする*/
visibility: hidden; /*要素自体を隠す*/
transition: .7s; /*変化する速度*/
z-index: 1; /*一番下に表示する*/
}
.mask.active{
opacity: 0.7; /*透明度を指定する*/
visibility: visible; /*要素を表示する*/
}▼jQuery
$(function(){
$(".hamburger_btn").on("click",function(){
$(this).toggleClass("active");
$(".nav").toggleClass("active");
$(".mask").toggleClass("active"); /*←追加*/
});
});これでハンバーガーメニューが完成です。
同じように作れたでしょうか。
ここからはオリジナルデザインに挑戦してみましょう。
ハンバーガーメニューのデザインに使えるCSS
この章では、ハンバーガーメニューのデザインに使えるCSSを紹介します。
色々な値を試してみて、オシャレなデザインを作りましょう。
background-color
background-colorは背景色を指定するものです。
ハンバーガーメニューの三本線で使ったspanタグも今回は黒を指定していますが、好きな色に変えてみてくださいね。
border-radius
border-radiusは角の丸みを調整するCSSです。
pxで指定することができます。
この記事で作った三本線は太くしてみるとわかりやすいのですが、角のとがった長方形になっています。
例えば、spanタグに5pxくらいを指定すると、角が少し丸くなっているのがわかりますよ。
transform
ハンバーガーメニューでは何度もでてくるtransformです。
位置を変えたり、バツ印の時は角度を変えたりしましたね。
この記事では、rotate(45deg)にしましたが、180度たして225degにすると位置は同じでも違った動きになります。
list-style
list-styleはリストの形式を指定することができます。
今回はnoneを指定して何も表示していませんが、例えばcircleを指定すると「○」、discを指定すると「●」などが選べます。
text-decoration
text-decorationは文字の装飾を指定できます。
こちらも今回はnoneを指定し、下線を消していますが、例えばoverlineを指定すると文字の上に線を引くこともできます。
まとめ
ハンバーガーメニューの作り方はわかったでしょうか。
私も勉強していたころは何度も悩んで色々な値を試していました。
はじめからオシャレに作ろうとは思わずに、まず完成させることを意識してほしいと思います。
オシャレに装飾するのもいいですが、完成しなければ意味がありませんからね。
この記事で、勉強しているみなさまのサポートができていれば幸いです。
コメント