コピペもOK！ハンバーガーメニューの作り方

ハンバーガーメニューとは主にスマホやタブレットなど画面幅が狭いデバイスで表示されるサイトメニューのことです。（当サイトの右上にもある三本線のやつです）

サンプルを公開しているサイトは数多くあり今さら感たっぷりですが、ハンバーガーメニューの作り方を初心者にも分かりやすく説明したいと考え記事にしてみました。

今回ご紹介するのは当サイトにも採用しており、個人的にUI的にも優れていると思う横から表示されるタイプです。

なお、cssのみで作成することも可能ですが、今回はJqueryを使用した方法を紹介したいと思います。今回の例を参考にJqueryを使えるようになると技術の幅も広がりますしね。一応コピペでも使用可能です！（うまくいかなかったらゴメンナサイ）

まずはhtmlから。


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ハンバーガーメニューの作り方</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>　<!--jquery本体をCDNで読み込み-->

<script>
$(function(){
 $('.menu_wrapper').on('click',function(){　<!--menu_wrapper要素をクリックしたら-->
    $('.drawer').toggleClass('active');　<!--drawer要素に「active」を付与-->
    $('.menu_line').toggleClass('active');　<!--menu_line要素に「active」を付与-->
    $('.menu_item_wrapper').fadeToggle();　<!--menu_item_wrapper要素を表示したり隠したり-->
 });
});
</script>
</head>

<body>

<!--ハンバーガーメニュー-->
<div class="drawer">
<div class="menu_wrapper">
<span class="menu_line menu_line_top"></span>
<span class="menu_line menu_line_center"></span>
<span class="menu_line menu_line_bottom"></span>
</div>

<!--メニュー内コンテンツ-->
<div class="menu_item_wrapper">
<ul>
<li><a href="リンク1のURL.html">リンク1</a></li>
<li><a href="リンク2のURL.html">リンク2</a></li>
<li><a href="リンク3のURL.html">リンク3</a></li>
<li><a href="リンク4のURL.html">リンク4</a></li>
</ul>
</div><!--menu_item_wrapper-->
</div><!--drawer-->

</body>

続いてcssです。当時の自分が「この説明があれば！」と思ったことを解説しています。


.drawer{
display:none; /*PCでは非表示に*/
}

@media screen and (max-width:768px){
.drawer{
display:block;
position:fixed;
top:0;
right:0;  /*右から出てくるようにするため。左から出したい時はleft:0;に*/
width:0%;  /*0%にして隠しておく*/
height:100%;  /*縦を全画面表示*/
background:#fff;  /*menuの背景色*/
z-index:9;  /*他要素より前面に（数値はページ構成に合わせ調整してください）*/
transition:0.4s;  /*0.4秒かけて戻る*/
}

/*drawer.activeがmenu_wrapperをクリックした時の.drawerのcssになる*/
.drawer.active{
display:block;
position:fixed;
top:0;
right:0;　/*右から出てくるようにするため。左から出したい時はleft:0;に*/
width:80%; 　/*メニューの横幅*/
max-width:400px;　　/*メニューの横最大幅*/
height:100%;　　/*縦を全画面表示*/
background:#fff;　 /*menuの背景色*/
z-index:9; 　/*他要素より前面に（数値はページ構成に合わせ調整してください）*/
transition:0.4s; 　/*0.4秒かけて表示*/
}

.menu_wrapper{
display:block;
position:fixed;
top:0px;
right:0px;
width:50px;
height:50px;
cursor:pointer;
z-index:9;
}

/*メニュー横棒の形状*/
.menu_line{
position:fixed;
display:block;
width:30px;　/*長さ*/
height:2px;　/*太さ*/
background:#606060;　/*色*/
z-index:9;
}

/*上の線の形状*/
.menu_line_top{
top:15px;　/*画面上部からの位置*/
transition:0.5s;　/*0.5秒かけて戻る*/
}

/*真ん中の線の形状*/
.menu_line_center{
top:25px;
transition:0.5s;
}

/*下の線の形状*/
.menu_line_bottom{
top:35px;
transition:0.5s;
}

/*上の線クリック時の形状*/
.menu_line_top.active{
top:25px;
transform:rotate(45deg);　/*斜め45度に回転*/
transition:0.5s;　/*0.5秒かけて回転*/
}

/*真ん中の線クリック時の形状*/
.menu_line_center.active{
transform:scaleX(0);　/*クリック時消す*/
transition:0.5s;
}

/*下の線クリック時の形状*/
.menu_line_bottom.active{
top:25px;
transform:rotate(135deg);
transition:0.5s;
}

/*ドロワー内メニュー*/
.menu_item_wrapper{
display:none;
width:100%;
max-width:400px;
min-width:200px;
padding:0px 0 0 0px;
margin-top:60px;
}

.menu_item_wrapper ul{
display:block;
}

.menu_item_wrapper ul li{
margin:20px 0;
list-style-type:none;
}

/*リスト下の区切り線*/
.menu_item_wrapper ul li:after{
content:"";
display:block;
height:1px;
width:80%;
background:#c0c0c0;
margin:15px 0 0 0;
}

.menu_item_wrapper ul li a{
font-size:20px;
text-decoration:none;
color:#000;　/*リスト文字色*/
}
}

自己流の部分が多いのでもっとスマートな作り方もあると思いますが、そこは素人なのでお許しを。。。

ハンバーガーメニューはもう時代遅れという評価も多く目にしますが、作り方を知っておいて損はないと思います。必要に応じ活用いただければ幸いです！

EnjomonWeb

コピペもOK！ハンバーガーメニューの作り方