狼読

 

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

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

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

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

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

上記のようにspanを大量に作ります(3本専用)
これに、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

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/04/28

[html]チェックボタンを文字を押した時にチェックされるようにする方法

投稿カレンダー

2024年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Technology

category

©狼読