サイトを構築する時、ハンバーガーメニュー（三本線や二本線のメニューボタン）を設置する機会が多いと思います。このメニューは現在では多くのサイトに使われており、サイトを閲覧する際は見かけることも多いと思います。スマホサイズ時に表示したり、レスポンシブサイトの右側に常に表示したりなどサイトによって表示方法は異なりますが、使用頻度が高い為、基本的な作りを覚えておいたり、テンプレート化しておくと便利です。
そんなわけで今回はシンプルなハンバーガーメニューの作成方法について紹介させていただきます。
ハンバーガーメニューボタンの作り方
ハンバーガーメニューは、基本的に「HTML」「CSS」「javascript」で作成することができます。HTMLとjavascriptは動きを付けるための土台のみなので、メニュー項目にも寄りますが、少ない行で実装可能です。
では実際にそれぞれの記述を説明していきます。
ハンバーガーメニューの記述
まずは、HTMLの記述から説明していきます。
<header id="header">
<!--↓メニュー開閉ボタン↓-->
<div id="toggle" class="btn">
<span></span>
<span></span>
<span></span>
</div>
<!--↓メニュー項目↓-->
<div class="menu">
<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>HTMLの記述は上記のようになります。
ヘッダーメニューになるので、headerタグ内に、また、全ページに共通して表示させるグローバルナビゲーション（グロナビ）になるので、navタグ内にメニュー項目を設置します。
次に、javascriptの記述を紹介していきます。
$(function(){
$("#toggle").click(function(){
$(this).toggleClass("open");
});
});上記がjavascriptの記述になります。toggleClassを使用し、ボタンをクリックしたらボタンの「open」クラスを付け外しするだけのシンプルな記述になります。
最後にCSSの記述になります。
/*ページ装飾用*/
ul,li{
list-style:none;
}
a{
text-decoration:none;
color:#3371e5;
}
#header{
position:relative;
}
.btn{
margin-bottom:15px;
}
/*メニュー内容*/
.menu{
background:#d4f1ff;
width:calc(100% - 80px);
padding:40px;
transition:0.3s all;
opacity:0;
visibility:hidden;
position:relative;
top:60px;
left:20px;
z-index:1;
}
.open + .menu{
opacity:1;
visibility:visible;
}
/*ボタン用*/
#toggle{
background:#3371e5;
width:40px;
height:40px;
cursor:pointer;
position:relative;
z-index:2;
}
#toggle span{
background:#fff;
width:26px;
height:2px;
display:block;
margin:auto;
position:absolute;
right:0;
left:0;
transition:0.3s all;
}
#toggle span:first-of-type{
top:10px;
}
#toggle span:nth-of-type(2){
top:19px;
}
#toggle span:last-of-type{
top:28px;
}
/**クリック後の動作設定**/
#toggle.open span:first-of-type{
top:19px;
transform:rotate(-45deg);
}
#toggle.open span:nth-of-type(2){
top:19px;
display:none;
}
#toggle.open span:last-of-type{
top:19px;
transform:rotate(45deg);
}メニューの内容はシンプルですが、それぞれのデザインに合わせて変更してください。
「ボタン用」の部分でボタンの見た目、クリック時の動作についての記述を入れています。よくある動作ですが、ボタンをクリックすると、×マークに変化するような記述となっています。
上記記述はコピーしてお使い頂いても問題ありませんので、ぜひ参考にしてみてください。
前へ
