CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。
以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。

共通のHTML・CSS

サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。
スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。

<button class="menu-trigger">
  <span></span>
  <span></span>
  <span></span>
</button>

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
}
.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;
}

閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。
以下のサンプルでは、メニュークリック時にJavaScriptを使ってactiveというクラスが追加・削除する動きを実装していますので、それぞれサンプルのCSSもクリック後に.activeというクラスが追加される想定の記述となっています。

中央ラインがサークルに変形

クリックすると中央のラインがサークルに変形し、上下のラインがそのサークル内にクローズアイコンの形に変形するというものです。
.menu-trigger span:nth-of-type(2)の記述を変更しつつ、クリック後のスタイルとしてCSSに下記を記述します。

.menu-trigger span:nth-of-type(2) {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-315deg) scale(.8);
}
.menu-trigger.active span:nth-of-type(2) {
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 3px solid #fff;
  border-radius: 50%;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(315deg) scale(.8);
}

中央ラインを斜めにし、上下ラインのサイズ・位置を変える #1

実際に動きを見てもらった方がわかりやすいと思いますが、クリックすると中央のラインが傾き、上下のラインはサイズ・位置を変更することで1本のラインのように見せ、最終的にクローズボタンのような見栄えになるものです。

上下のラインと中央のラインの間に少しスペースがあるのは意図的にそうしているのですが、もし空けずに繋がったラインのように見せたい場合はwidthやtransform: translate3dで指定している値をそれぞれ変更してください。
実装にはクリック後のスタイルとしてCSSに下記を記述します。

.menu-trigger.active span:nth-of-type(1) {
  width: 45%;
  transform: translate3d(2px, 10px, 0) rotate(45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  transform: translate3d(-1px, 0, 0) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(3) {
  width: 45%;
  transform: translate3d(23px, -9px, 0) rotate(45deg);
}

中央ラインを斜めにし、上下ラインのサイズ・位置を変える #2

基本的な動きは先ほどと同様で、上下のラインに指定していたtransform: rotateの値を大きいものに変更することで、上下のラインがクルクルッと回転しながら変更されていくものです。
実装にはクリック後のスタイルとしてCSSに下記を記述します。

.menu-trigger.active span:nth-of-type(1) {
  width: 45%;
  transform: translate3d(2px, 10px, 0) rotate(405deg);
}
.menu-trigger.active span:nth-of-type(2) {
  transform: translate3d(-1px, 0, 0) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(3) {
  width: 45%;
  transform: translate3d(23px, -9px, 0) rotate(405deg);
}

一旦ボタンを非表示にし、クローズボタンにして表示

transform: scaleを利用してクリックすると小さくなりながら一旦非表示になり、その後クローズボタンに変化したものを表示させるという動きです。
実装には共通のスタイルに加え、CSSに下記を記述します。

.menu-trigger {
  animation: menu-close .6s;
}
.menu-trigger.active {
  animation: menu-open .6s;
}
@keyframes menu-close {
  30% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes menu-open {
  30% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}

上下ラインを非表示にし、中央ラインをクローズボタンに #1

クリックすると上下のラインが中央に向かって移動しながら消えていき、中央のラインがクローズボタンに変化するという動きになります。

クローズボタンは片方のラインは.menu-trigger span:nth-of-type(2)を傾けたものですが、もう片方のラインは擬似要素を利用して表示させたラインとなり、デフォルトの状態では重ねて配置しているので1本のラインしかないように見えています。
実装には共通のスタイルに加え、CSSに下記を記述します。

.menu-trigger span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  transition: all .4s;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) scale(0);
}
.menu-trigger.active span:nth-of-type(2) {
  transform: rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2)::after {
  transform: rotate(90deg);
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) scale(0);
}

上下ラインを非表示にし、中央ラインをクローズボタンに #2

同じく上下のラインが非表示なり、中央のラインがクローズボタンに変化するという動きになりますが、それぞれ動きを多少変えたものになります。
先ほどは中央に向かって消えていた上下のラインは左右それぞれに向かっていくように非表示になり、中央のラインは回転しながらクローズボタンへと変化していきます。

また、クローズボタンはこちらも先ほど同様で中央のラインと擬似要素を使って見た目を作っています。
実装には共通のスタイルに加え、CSSに下記を記述します。

.menu-trigger span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  transition: all .4s;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translate(50%) scale(0);
}
.menu-trigger.active span:nth-of-type(2) {
  transform: rotate(45deg);
}
.menu-trigger.active span:nth-of-type(2)::after {
  transform: rotate(90deg);
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translate(-50%) scale(0);
}

擬似要素でテキストを表示させる

本来は普通にデバイスで表示させるほうが好ましいとは思いますが、擬似要素を利用することでこのようにテキストを表示させ、更にクリック後にテキストを変更するという動きをCSSで実装できます。
サンプルではデフォルトで「MENU」、クリック後に「CLOSE」というテキストがアイコン下に表示されるようにしたもので、実装には共通のスタイルに加え、CSSに下記を記述します。

.menu-trigger::after {
  position: absolute;
  left: 0;
  bottom: -30px;
  content: 'MENU';
  display: block;
  width: 100%;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: all .4s;
}
.menu-trigger.active::after {
  content: 'CLOSE';
  bottom: -25px;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}

ワンポイント加える

たまに見かけることがある、ただラインを並べるだけでなくちょっとしたワンポイントを加えているタイプのハンバーガーメニューアイコンです。
ワンポイントは擬似要素で表示させているだけで、クリック後の動きは中央のラインが消えて、上下のラインがクローズボタンになるというシンプルなものになります。
実装には共通のスタイルに加え、CSSに下記を記述します。

.menu-trigger span {
  left: 8px;
  width: 42px;
}
.menu-trigger span::before {
  position: absolute;
  top: 0;
  left: -8px;
  content: '';
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.menu-trigger.active span {
  left: 0;
  width: 100%;
}
.menu-trigger.active span::before {
  content: none;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}

ホバー時に動きをつける #1

簡易的なものですがこちらは今まで紹介してきたクリック後の動きとは違ってホバー時の動きで、ホバーすると上下のラインが中央に少しだけ近付くというものです。
また、クリック後の動きは中央のラインが消えて、上下のラインがクローズボタンになるという動きです。
実装には共通のスタイルに加え、CSSに下記を記述します。

.menu-trigger:not(.active):hover span:nth-of-type(1) {
  top: 6px;
}
.menu-trigger:not(.active):hover span:nth-of-type(3) {
  bottom: 6px;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}

ちなみに、今回のサンプルでは中央に向かっていくものですが、逆に少し外に広がるタイプのも見かけることが多いと思います。
広がる感じにしたい時は、.menu-trigger:not(.active):hover span:nth-of-type(1)のtop、.menu-trigger:not(.active):hover span:nth-of-type(3)のbottomにそれぞれ指定している値をマイナスにすればそのような動きになります。

ホバー時に動きをつける #2

同じく簡易的なものですがこちらもホバー時の動きで、ホバーすると中央と下のラインサイズが変更するというものです。
また、クリック後の動きは中央のラインが消えて、上下のラインがクローズボタンになるという動きです。
実装には共通のスタイルに加え、CSSに下記を記述します。

.menu-trigger:not(.active):hover span:nth-of-type(2) {
  width: 70%;
}
.menu-trigger:not(.active):hover span:nth-of-type(3) {
  width: 35%;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}

今回のサンプルではホバー時として紹介しましたが、サイトによってはデフォルトでこのようにサイズの異なるラインを表示させていたり、他にも中央のラインだけサイズを変えるという見た目やクリック後にクローズボタンではなくこの見栄えを表示させているというサイトもありますね。

上で紹介した動きをまとめて確認したい場合は以下でご覧になれます。

Demo

また、CSSで実装したハンバーガーメニュークリック時のエフェクトは以前にも紹介しており、いずれもここでは紹介していないものを全12種類紹介しているので、興味ある方は併せてご覧ください。

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋