つばさのーと

つばさの日常を綴るのーと

CSSでハンバーガーメニューのアニメーションを実装する方法

f:id:tsubasa123:20170604170435j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

ハンバーガーメニューってご存知ですか?スマホサイトのページ上部にあるタップするとメニューがベロンってでてくる三本線のボタンのことをハンバーガーメニューと呼びます。「≡ 」こーゆーやつ、見たことありますよね。

 

知人から「どうやって作るの?」って聞かれて答えられなかったのでちょっと調べてみました。色々やり方があるようですが、とりあえず一番シンプルで簡単そうな奴だけ自分でも試してみたのでまとめておきます。

 

アニメーションはCSSだけでOK

 

クラスの着脱にはちょっとだけJavaScriptを使う必要がありますが、アニメーション自体はCSSで行うことが可能です。知ってはいたんですがどうもその辺は知識不足でして。

 

www.nxworld.net

 

このサイトがすごい。以前に見出しのデザインを探したときもお世話になりましたが、ほんとにすごい。デザインのカスタマイズを検討されている方は上記のサイトを参考にすると非常に捗ります。しつこいですが、ほんっとにすごいです。ただ、すごすぎてカスタマイズが難しい。知識不足だとどうやってカスタマイズしていいのかわからなくなります。

 

かなり複雑なアニメーションまで紹介されていますが、今の私にはハードルが高すぎるのでとりあえず一番上の一番よくみる一番シンプルなやつを真似させてもらいます。

 

いざ実装

 

HTMLとCSSを拝借。

 

HTML

<a class="menu-trigger" href="#">
    <span>a</span>
    <span>a</span>
    <span>a</span>
</a>

 

CSS

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.menu-trigger {
    position: relative;
    width: 50px;
    height: 44px;
}
.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
    top: 0;
}
.menu-trigger span:nth-of-type(2) {
    top: 20px;
}
.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
}

 

JavaScript

$('.menu-trigger').on('click', function() {
    $(this).toggleClass('active');
});

 

CSSで実装するハンバーガーメニュークリック時のエフェクト 10+ http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html

 

これだけでアニメーション付きのハンバーガーメニューが作れちゃいます。一応、簡単にやってることを整理してみると、

 

  • 1つ目のバーを左に45度傾ける
  • 2つ目のバーを非表示(透明)にする
  • 3つ目のバーを右に45度傾ける

 

ってことですね。コードにしてもらえれば意味はわかるけどまだ自分の頭では考えられません。勉強不足です。

 

CSSのアニメーションは2通りあるっぽい

 

これは備忘録。私が試してみて思ったことなので間違ってるかもしれませんが、私的に気になったことをメモっときます。

 

CSSのアニメーションにはtransitionプロパティを使ったものと、keyframesプロパティ?を使ったものの2種類に大別されるようでして。おそらくアニメーションの特性というか、何をしたいのかによって使い分ける模様。

 

transitionプロパティの場合は、JavaScriptを利用してクラスを追加するなどして装飾に変更(サイズの変更や色の変更)を加えた際に、指定した時間をかけて変化させるようなアニメーションの設定方法。なので、何かしらのイベントが必要になりそうです。

 

keyframesプロパティの場合は、どちらかというとタイムラインのアニメーション的なイメージ。アニメーションの開始から終了までの間にどのような変化を加えたいのかを細かく指定することができます。先のサイトではクリックイベントからアニメーションが駆動していましたが、こちらの場合はイベントに頼らなくてもアニメーションを開始することができそうです。

 

この辺の違いとか使い分けとかはまた改めて調べてみる価値がありそうです。

 

さいごに

 

CSSアニメーションの奥深さを垣間見ました。この辺はいつかできるようになりたいなーと思っているんですが、どうも私には向いてないようでなかなか学習意欲が高まりません。今はまだJavaScriptで手いっぱいなので堅実に一歩ずつ知識を蓄えていきたい所存であります。

 

ではでは、最後までお付き合いいただきありがとうございました。