CSSだけでハンバーガーメニューを作ってみた！

こんにちは。ちっちゃくらです。

ブログにハンバーガーメニューを設置しようと、他の方がjavascript(jQuery)を使って実装したコードをコピペしたのですがなぜかうまく動きません。

なので、cssだけで作られたいい感じのハンバーガーメニューが無いものかと探してみました。

ですが、あまりピンとくるものはありません。

パンがなければ、自分で作ればいいじゃない！

ということで、javascriptを一切使わない、cssで実装するハンバーガーメニューを作りました！
もちろん、アニメーション付きです！

コードはこちら

DEMO

See the Pen BZNVYQ by Yugo (@chicchekura) on CodePen.

HTML

<span class="hum_icon" ontouchstart="" >≡</span>
<nav ontouchstart="" class="hum_menu">
 <ul>
  <li><a href="#">みだし</a></li>
  <li><a href="#">みだしなみ/a></li>
  <li><a href="#">みだれがみ</a></li>
  <li><a href="#">みちのせかい</a></li>
 </ul>
</nav>

構造自体は割りとシンプルです。
「ontouchstart=""」と記述することでスマホに対応します。

CSS

.hum_icon{
  position:fixed;
  top:10px;
  right:10px;
  font-size:30px;
  z-index:10000;
  color:#fff;
  background-color:#0168B3;
  border-radius:10px;
  width:50px;
  height:50px;
  display: inline-block;
  text-align:center;
  line-height:45px;
  outline:none;
}

.hum_menu{
  z-index:9999;
  position:fixed;
  top:-200px;
  right:10px;
  background-color:#0168B3;
  border-radius:50px 0 30px 50px;
}



.hum_menu a{
  text-decoration:none;
  color:#fff;
}

.hum_menu li{
  text-decoration:none;
  list-style:none;
  background-color:#0168B3;
  height:40px;
  text-align:right;
  padding:0 55px 0 0px;
  line-height:40px;
  border-radius:50px;
}


.hum_menu:hover,
.hum_icon:hover + .hum_menu{
  top:60px;
  transition-property:all;
  transition-duration:400ms;
  transition-timing-function:ease-in-out;
}

.hum_icon:hover{
  border-radius:10px 10px 0 0px;
  animation-name: rotation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running; 
}

@keyframes rotation {
  0% {
    transform: rotatez(0);
  }

  50% {
    transform:  rotatez(-180deg);
  }

  100% {
    transform: rotatez(-360deg);
  }
}

カーソルが、メニューアイコンもしくはメニュー自体に乗っている時、メニュー自体の配置を移動する形で実現しました。

CSSの解説

前半部分は、少しCSSが分かる方なら簡単に理解できると思います。
難しいのはきっと、この部分から。

.hum_menu:hover,
.hum_icon:hover + .hum_menu{
  top:60px;
  transition-property:all;
  transition-duration:400ms;
  transition-timing-function:ease-in-out;
}

ここに書いてある要素は、アイコンの上かメニューの上にカーソルが載っている時適応されます。
「transition-〇〇」というプロパティは、アニメーションに関する設定を記述できます。
「transition-property:all」で、全てのプロパティに対して変更を許可。
「transition-duration:400ms」で、アニメーションの時間を400msに設定。
「transition-timing-function:ease-in-out」で、アニメーションの速度を設定。

以上のプロパティで、メニュー自体の動きを書いています。

以下は、アイコン自体のアニメーションの記述。くるくる回るようにします。

.hum_icon:hover{
  border-radius:10px 10px 0 0px;
  animation-name: rotation;
  animation-duration: 300ms;
  animation-timing-function: ease-in;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes rotation {
  0% {
    transform: rotatez(0);
  }

  50% {
    transform:  rotatez(-180deg);
  }

  100% {
    transform: rotatez(-360deg);
  }
}

「animation-name:〇〇」と記述すると、「@keyframes 〇〇」と書いたアニメーションが適応される仕組みになっています。
@keyframesの中には、アニメーションの動きを記述します。上のコードなら、指定された時間の0%経過した時、50%経過した時、100%経過した時に場合分けをして書いています。

「animation-duration: 300ms」で、アニメーションの時間を300msに設定。
「animation-timing-function: ease-in;」で、動きのなめらかさを設定。
「animation-fill-mode: forwards;」で、アニメーションが終わった後に、アニメーション後のCSSを適用。

animationの他のプロパティや、@keyframes内でどんな動きが指定できるか知りたい方は、ググりましょう！
簡単に分かるはずです！

何か質問やご指摘があれば、気軽にコメントを書いてくださいまし！
あ、あとこのコード使いたい方がいたら、自由に使ってください！
（僕のブログの事を紹介してくれると嬉しいです。嬉しい。）

では！

おすすめ記事
www.everydinner.com
www.everydinner.com

はてなPress!

東京で暮らすエンジニアが色々書くやつ。

CSSだけでハンバーガーメニューを作ってみた！

コードはこちら

HTML

CSS

CSSの解説