こんにちは。
入社1年目の新米コーダーです。

スマートフォンサイトでよくみかける、三本線のメニューボタン。
押すと、にょきっとメニューが出てきますよね。このメニューボタンは、ハンバーガーメニューと呼ばれています。
メニューボタン開閉
そんなにおいしそうには見えませんが、三本線がハンバーガーの重なりに見えるからのようです。
今回は、ハンバーガメニューの作り方についてご紹介いたします。

オープンボタン

まず、HTMLはこんな感じになります。

【HTML】

<div id="header">
<p id="openMenu">
<a href="#">
<img src="menu.png" alt="メニュー" width="37" height="37">
</a>
</p>
</div>
<div id="layerMenu">
<img id="closeMenu" src="menu_close.png" alt="閉じる" width="37" height="37">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

次に、cssでスタイルを指定します。

【CSS】

#header{
position: relative;
}
#openMenu{
position:absolute;
top: 0;
right: 0;
}
#layerMenu{
display: none;
position:absolute;
top:37px;
left:0;
width:100%;
height:100%;
font-size: 12px;
z-index:9999;
}
#layerMenu ul{
border-top: solid 1px #ccc;
}
#layerMenu ul li{
background: #fff;
list-style: none;
border-bottom: solid 1px #ccc;
}
#layerMenu ul li a{
position: relative;
padding: 10px;
text-decoration: none;
color: #555;
display: block;
}
#layerMenu ul li a:hover{
color: #EA0001;
}
#closeMenu {
position: absolute;
top: -37px;
right: 0;
}

ボタンは絶対配置で右上に配置します。
メニューは、ボタンを押したときに真下に出てきてほしいので、
ボタンの高さ37px分、下に下げて配置します。
ボタンを押すまで隠しておきたい#layerMenuは、display: none;で非表示にしておきます。

最後に、JavaScriptの実装です。

【JavaScript】

$(function(){
$("#openMenu").click(function(){
$("#layerMenu").height( $(document).height() );
$("#layerMenu").fadeIn("fast");
});
$("#closeMenu").click(function(){
$("#layerMenu").fadeOut("fast");
});
});

JavaScriptを使用し、メニューの表示・非表示をマウスのクリック操作で切り替えられるようにします。
#openMenuをクリックしたとき、非表示にしていた#layerMenuをfadeInで表示させます。
反対に、#closeMenuをクリックしたときは、#layerMenuをfadeOutで非表示にさせます。
このアニメーションは(“”)でスピードを指定できます。
速度は、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定することなどが出来ます。

これで、ハンバーガーメニューの完成です！
レスポンシブサイトでは、PCサイトのグローバルナビゲーションが、このハンバーガーの中に集約されます。

海外サイトなどでは、スマートフォンサイトだけでなくPCサイトにもこのハンバーガーがよく用いられるようで、その開閉アニメーションに色んな動きがあるみたいなので、色々調べて実践してみたいと思います！

お問い合わせ