jQuery

【jQuery+CSS】ハンバーガーアイコンの作り方【理解しよう】

こんにちはこんばんは、フロントエンドエンジニアのこうへいです!

 

レスポンシブデザインが必須となっている中、必ずと言ってもいいほど登場してくるのが、「ハンバーガーメニュー」です。

たくさんのパターンを知っておきストックしておくことで、コーディングがスムーズになること間違いないですね。

 

本日は、ハンバーガーアイコンの作り方を解説していきます!

 

そもそものハンバーガーアイコンの作り方

ハンバーガーアイコンは、三本線で作られたものが一般的です。

今回は、以下の条件で作ってみました。

  • 三本線のデザイン
  • 押すと×ボタンに変わる

 

See the Pen
ハンバーガーアイコン
by kei (@kei_01011)
on CodePen.

 

HTMLとCSSでハンバーガーアイコンを再現

 

HTML

<div class="toggle">
  <span></span><!--1本目-->
  <span></span><!--2本目-->
  <span></span><!--3本目-->
</div>

ハンバーガーアイコンは、spanタグで再現します。

spanタグ一つと、擬似要素を使う場合もありますが、僕はこちらの方がわかりやすいので好んで使ってます。(多分擬似要素の方が良い?)

 

 

CSS

/*boduyの右上に固定配置*/
.toggle {
    position: fixed;
    right: 13px;
    top: 12px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 3;
}
 
.toggle span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #000;
    transition: .35s ease-in-out;           
    left: 6px;
}

/*線と線の余白*/
.toggle span:nth-child(1) {
    top: 9px;
}
 
.toggle span:nth-child(2) {
    top: 18px;
}
 
.toggle span:nth-child(3) {
    top: 27px;
}
 

 

右上に固定配置しつつ、spanの色やサイズを指定します。

nth-childを使って、線と線の余白を指定してあげれば、ハンバーガーアイコンの完成。

あとは、クリックした時の動きをつける必要がありますね。

 

クリックしたら×にする動きをつける

 

JavaScript

$(function() {
 $('.toggle').click(function() {
//toggleをクリックした時
  $(this).toggleClass('active');
// .active クラスを付与する
 });
});

 

jQueryを使って、ハンバーガーアイコンをクリックした時に、activeというクラスがつくようにします。

クラス付与は、toggleClassメソッドを使ってます。

 

toggleClassは、

指定したCSSクラスが要素に無ければ追加し、あれば削除する。

 

という意味で、

addClassやremoveClassで追加と削除のコードを書かなくて良いのがメリットです。

 

 

CSS

/* 最初のspanをマイナス45度に */
.toggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    transform: rotate(-45deg);
/*     transform: rotate(405deg); 回転させたい時*/ 
}

 /* 2番目のspanを非表示に */
.toggle.active span:nth-child(2){
  opacity:0;
}

/* 3番目のspanを45度に */
.toggle.active span:nth-child(3) {
    top: 18px;
    transform: rotate(45deg);
/*     transform: rotate(-405deg);回転させたい時 */
}

 

次に、CSSでactiveクラスが付いている時の動きをつけていきます。

今回は、transformで45度回転させて×を再現していますが、これもいろいろ方法があるので、パターンを知っておくと良さそう。

 

See the Pen
ハンバーガーアイコン(回転)
by kei (@kei_01011)
on CodePen.

ぐるっと回転させたい場合は、rotateの値を変更すれば、アニメーションっぽさが出ます。

 

LIGの記事でハンバーガーアイコンのパターンを公開されていて、めちゃくちゃ参考になったので、オススメしておきます!

 

 

少し長くなりそうなので、

次回、ハンバーガーアイコンをクリックした時のメニューパターンについてまとめていきます。