狼読

2020/04/17

ハンバーガーボタンを作ってみよう

今回はハンバーガーボタンを作ってみようと思います。ハンバーガーボタンとは、横線が縦に３つ並んでいるスマートフォンなどでwebページを閲覧しているときに出てくるメニューボタンのことを言います。そんな広く使われているハンバーガーボタンですが、今回はそれを自作してみようと思います。

ハンバーガーボタンを作るHTMLの構造

ハンバーガーボタンを作るHTMLをご紹介します。

<div class="humberger"><span></span><span></span><span></span></div>

上記のようにspanを大量に作ります（３本専用）
これに、cssを当ててハンバーガーボタンに近づけていきましょう。

ハンバーガーボタンをcssでデザインしよう

先ほどのHTMLに対して、デザインを入れていこうと思います。

<style>
.humberger{
 width:50px;
 height:30px;
 display:inline-block;
 position:relative;
}
.humberger span{
 display:inline-block;
 position:absolute;
}
.humberger span:nth-of-type(1){
  width:100%;
  height:2px;
  background:#000;
  top:0;
}
.humberger span:nth-of-type(2){
  width:100%;
  height:2px;
  background:#000;
  top:14px;
}
.humberger span:nth-of-type(3){
  width:100%;
  height:2px;
  background:#000;
  bottom:0;
}
</style>
<div class="humberger"><span></span><span></span><span></span></div>

サンプル実装例（ハンバーガーボタン）

※クリックしても動作しません。

上記のようにハンバーガーボタンの見た目になったのではないでしょうか。
あとは、クリックした時のぺけマークを作りましょう。
作り方は上記のサンプルにクラスを追加して、線を移動させるだけで可能です。
activeというクラスでもつけて見ましょうか。（名前はお好きにつけても大丈夫です）

<style>
.humberger{
 width:50px;
 height:30px;
 display:inline-block;
 position:relative;
 margin-bottom:50px;
}
.humberger span{
 display:inline-block;
 position:absolute;
}
.humberger span:nth-of-type(1){
  width:100%;
  height:2px;
  background:#000;
  top:0;
}
.humberger span:nth-of-type(2){
  width:100%;
  height:2px;
  background:#000;
  top:14px;
}
.humberger span:nth-of-type(3){
  width:100%;
  height:2px;
  background:#000;
  bottom:0;
}
.humberger.active span:nth-of-type(1){
  top:5px;
  transform:rotateZ(45deg);
}
.humberger.active span:nth-of-type(2){
  opacity:0;
}
.humberger.active span:nth-of-type(3){
  bottom:22px;
  transform:rotateZ(-45deg);
}
</style>
<div class="humberger　active"><span></span><span></span><span></span></div>

サンプル実装例（ぺけマーク）

※クリックしても動作しません。

上記のようにactiveをつけた場合のボタンのデザインも出来上がりました。
次は、このボタンが切り替わるようにします。

ハンバーガーボタンを動かしてみよう

上記の手順で通常のハンバーガー状態とクリックされた状態のぺけマークのデザインができました。次はこのデザインを、jsを使って切り替えて見ましょう。

<script>
$(function(){
 $('.humberger').on('click',function(){
   $(this).toggleClass('active');
 });
});
</script>

ハンバーガーボタンを動かす（サンプル）

上記のコードで、humbergerがクリックされた際にactiveというクラスが付与されます。また、toggleClassを使用しているため、activeクラスがなかったら削除されます。このように切り替えが可能になります。

まとめ

ハンバーガーボタンは、幅広く使用されています。上記の手順で手作りすることもできますので、ぜひ自分なりのメニューボタンを作って見てください。
基本的な考え方は、通常のハンバーガーの状態を用意して、クリックしたらデザインが変わるようにcssを記述するということですね。例えばクリックされたら先ほどのデザインに一手間加えることでアニメーションのようにもなります。

このように、transitionを仕込むだけでよりボタンっぽいデザインになりますので、ぜひ試して見てください。

Profile Card