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

Tips

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

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

その他のハンバーガーメニューアイコンのエフェクト

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

共通のHTML・CSS

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

HTML

<a class="menu-trigger" href="#">
  <span></span>
  <span></span>
  <span></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;
}

※閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

※メニュークリック時に関してはjQueryの.toggleClass()を使ってactiveというクラスが付加する動きを以下のサンプルでは実装していますので、それぞれサンプルのCSSもクリック後に.activeというクラスが付加される場合の記述となっています。

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

  1. 中央ラインがサークルに変形
  2. 中央ラインを斜めにし、上下ラインのサイズ・位置を変える #1
  3. 中央ラインを斜めにし、上下ラインのサイズ・位置を変える #2
  4. 一旦メニューを非表示にし、クローズボタンにして表示
  5. 上下ラインを非表示にし、中央ラインをクローズボタンに #1
  6. 上下ラインを非表示にし、中央ラインをクローズボタンに #2
  7. 擬似要素でテキストを表示させる
  8. ワンポイント加える
  9. ホバー時に動きをつける #1
  10. ホバー時に動きをつける #2

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

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

CSS

.menu-trigger span:nth-of-type(2) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-315deg) scale(.8);
  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) {
  -webkit-transform: translateY(-20px) rotate(315deg) scale(.8);
  transform: translateY(-20px) rotate(315deg) scale(.8);
}

目次へ

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

実際に動きを見てもらった方がわかりやすいと思いますが、クリックすると中央のラインが傾き、上下のラインはサイズ・位置を変更することで1本のラインのように見せ、最終的にクローズボタンのような見栄えになるものです。
上下のラインと中央のラインの間に少しスペースがあるのは意図的にそうしているのですが、もし空けずに繋がったラインのように見せたい場合はwidthtransform: translate3dで指定している値をそれぞれ変更してください。
実装にはクリック後のスタイルとしてCSSに下記を記述します。

CSS

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

目次へ

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

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

CSS

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

目次へ

4. 一旦メニューを非表示にし、クローズボタンにして表示

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

CSS

.menu-trigger {
  -webkit-animation: menu-close .6s;
  animation: menu-close .6s;
}
.menu-trigger.active {
  -webkit-animation: menu-open .6s;
  animation: menu-open .6s;
}
@-webkit-keyframes menu-close {
  30% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@keyframes menu-close {
  30% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes menu-open {
  30% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-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) {
  -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);
}

目次へ

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

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

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) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2)::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) scale(0);
}

目次へ

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

同じく上下のラインが非表示なり、中央のラインがクローズボタンに変化するという動きになりますが、それぞれ動きを多少変えたものになります。
先ほどは中央に向かって消えていた上下のラインは左右それぞれに向かっていくように非表示になり、中央のラインは回転しながらクローズボタンへと変化していきます。
また、クローズボタンはこちらも先ほど同様で中央のラインと擬似要素を使って見た目を作っています。
実装には共通のスタイルに加え、CSSに下記を記述します。

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) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-trigger.active span:nth-of-type(2)::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translate(-50%) scale(0);
}

目次へ

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

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

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;
  transition: all .4s;
}
.menu-trigger.active::after {
  content: 'CLOSE';
  bottom: -25px;
}
.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);
}

目次へ

8. ワンポイント加える

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

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) {
  -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);
}

目次へ

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

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

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) {
  -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);
}

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

目次へ

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

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

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) {
  -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);
}

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

目次へ

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

Posted on

Category : Tips

Close the search window,
please press close button or esc key.