サイドバーがブワーッと拡大!Web制作でそのまま使えるCSSハンバーガーメニュー3選

今回はハンバーガーメニューをクリックするとサイドバーがtransform:scaleで拡大しながら表示されるCSSアニメーションを実装しました。

スライドにtransform:scaleを使用した拡大アニメーションに加えてtranslateのスライドとrotateの回転もプラスした3種類のマテリアルデザインを作りました。

マテリアルデザインなのでそのまますぐにでもコピペして使用できるように仕上がっています。

htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

 

1. サイドバーがブワーッと拡大表示されるハンバーガーメニュー

動きは下の画像のような感じになります

コードを見る
<div>
  <div class="hamburger">
    <div class="borders">
      <a href="#sidemenu" class="hamburger-menu">
        <div class="first-border"></div>
        <div class="second-border"></div>
        <div class="third-border"></div>
      </a>
    </div>
  </div>
  <header id="sidemenu" class="sidenavs">
    <a href="#" class="close-btn">&times;</a>
    <div class="sidebar-btn">
      <p><a href="#">About</a></p>
      <p><a href="#">Services</a></p>
      <p><a href="#">Clients</a></p>
      <p><a href="#">Contact</a></p>
    </div>
  </header>
</div>
.hamburger-menu div {
  height: 5px;
  background-color: black;
  margin: 5px auto;
}
.hamburger-menu .first-border {
  width: 25px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .second-border {
  width: 18px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .third-border {
  width: 12px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger .borders {
  padding-top:5px;
}
.hamburger {
  width:52px;
  height:50px;
  border:2px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  opacity:1;
  /* 透明度を指定 */
  background:#f1f1f1;
}
.hamburger:hover {
  opacity:0.5;
  /* 透明度を指定 */
}
.hamburger + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 40%;
  /* サイドメニューの幅 */
  display:block;
  transform:scale(1);
  /* 伸縮率を指定 */
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
  transition-duration:1.2s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-image:url("https://source.unsplash.com/1000x803");
  /* サイドバーの背景画像を指定 */
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: .8s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:scale(0);
  /* 伸縮率を指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 45px;
  /* 文字サイズを大きめに調整 */
  color: white;
  display: block;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidebar-btn a {
  transform:skewX(0deg);
  /* X軸の傾斜角度を指定 */
}
.sidebar-btn a:hover {
  color: black;
  transform:skewX(-20deg);
  /* X軸の傾斜角度を指定 */
}
.sidenavs p {
  margin:20px 80px;
  /* サイドバーのボタン位置を調整 */
  width:250px;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント!
  1. 長さの異なるボーダーを縦に並べることで「ドネルメニュー(Doner Menu)」を実現
  2. ドネルメニューをクリックするとtransform:scaleが実行されサイドバーが拡大しながら現れるアニメーションを実現
  3. ドネルメニューをhoverするとopacityが実行されて透明化する
  4. サイドバーのwidthを40%に調整
  5. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  6. サイドバーのボタンをhoverするとtransform:skewが実行されボタンが斜めに傾くアニメーションとなるように傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)

 

2. サイドバーが超拡大しながらスライド表示されるハンバーガーメニュー

動きは下の画像のような感じになります

コードを見る
<div>
  <div class="hamburger">
    <div class="borders">
      <a href="#sidemenu" class="hamburger-menu">
        <div class="first-border"></div>
        <div class="second-border"></div>
        <div class="third-border"></div>
      </a>
    </div>
  </div>
  <header id="sidemenu" class="sidenavs">
    <a href="#" class="close-btn">&times;</a>
    <div class="sidebar-btn">
      <p><a href="#">About</a></p>
      <p><a href="#">Services</a></p>
      <p><a href="#">Clients</a></p>
      <p><a href="#">Contact</a></p>
    </div>
  </header>
</div>
.hamburger-menu div {
  height: 5px;
  background-color: black;
  margin: 5px auto;
}
.hamburger-menu .first-border {
  width: 25px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .second-border {
  width: 18px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .third-border {
  width: 12px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger .borders {
  padding-top:5px;
}
.hamburger {
  width:52px;
  height:50px;
  border:2px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  opacity:1;
  /* 透明度を指定 */
  background:#f1f1f1;
}
.hamburger:hover {
  opacity:0.5;
  /* 透明度を指定 */
}
.hamburger + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 40%;
  /* サイドメニューの幅 */
  display:block;
  transform:scale(1) translate(865px,0px);
  /* 伸縮率とXY軸(横縦)の移動距離を指定 */
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
  transition-duration:1.2s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-image:url("https://source.unsplash.com/1000x802");
  /* サイドバーの背景画像を指定 */
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: 0.8s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:scale(0) translate(0px,2000px);
  /* 伸縮率とXY軸(横縦)の移動距離を指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 45px;
  /* 文字サイズを大きめに調整 */
  color: white;
  display: block;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidebar-btn a {
  transform:skewX(0deg);
  /* X軸の傾斜角度を指定 */
}
.sidebar-btn a:hover {
  color: black;
  transform:skewX(-20deg);
  /* X軸の傾斜角度を指定 */
}
.sidenavs p {
  margin:20px 80px;
  /* サイドバーのボタン位置を調整 */
  width:250px;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント!
  1. 長さの異なるボーダーを縦に並べることで「ドネルメニュー(Doner Menu)」を実現
  2. ドネルメニューをクリックするとtransform:scale, translateXYが実行されサイドバーが拡大&下から斜め上にスライドしながら現れるアニメーションを実現
  3. ドネルメニューをhoverするとopacityが実行されて透明化する
  4. サイドバーのwidthを40%に調整
  5. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  6. サイドバーのボタンをhoverするとtransform:skewが実行されボタンが斜めに傾くアニメーションとなるように傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)

 

3. サイドバーが超拡大&回転しながらスライド表示されるハンバーガーメニュー

動きは下の画像のような感じになります

コードを見る
<div>
  <div class="hamburger">
    <div class="borders">
      <a href="#sidemenu" class="hamburger-menu">
        <div class="first-border"></div>
        <div class="second-border"></div>
        <div class="third-border"></div>
      </a>
    </div>
  </div>
  <header id="sidemenu" class="sidenavs">
    <a href="#" class="close-btn">&times;</a>
    <div class="sidebar-btn">
      <p><a href="#">About</a></p>
      <p><a href="#">Services</a></p>
      <p><a href="#">Clients</a></p>
      <p><a href="#">Contact</a></p>
    </div>
  </header>
</div>
.hamburger-menu div {
  height: 5px;
  background-color: black;
  margin: 5px auto;
}
.hamburger-menu .first-border {
  width: 25px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .second-border {
  width: 18px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .third-border {
  width: 12px;
  /* メニューアイコンの線の長さを調整 */
}
.hamburger .borders {
  padding-top:5px;
}
.hamburger {
  width:52px;
  height:50px;
  border:2px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  opacity:1;
  /* 透明度を指定 */
  background:#f1f1f1;
}
.hamburger:hover {
  opacity:0.5;
  /* 透明度を指定 */
}
.hamburger + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 40%;
  /* サイドメニューの幅 */
  display:block;
  transform:scale(1) translate(865px,0px) rotate(360deg);
  /* 伸縮率とXY軸(横縦)の移動距離とZ軸の回転角度を指定 */
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
  transition-duration: .8s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-image:url("https://source.unsplash.com/1000x801");
  /* サイドバーの背景画像を指定 */
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: 0.8s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:scale(-0.1) translate(0px,750px) rotate(-360deg);
  /* 伸縮率とXY軸(横縦)の移動距離とZ軸の回転角度を指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 45px;
  /* 文字サイズを大きめに調整 */
  color: white;
  display: block;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidebar-btn a {
  transform:skewX(0deg);
  /* X軸の傾斜角度を指定 */
}
.sidebar-btn a:hover {
  color: black;
  transform:skewX(-20deg);
  /* X軸の傾斜角度を指定 */
}
.sidenavs p {
  margin:20px 80px;
  /* サイドバーのボタン位置を調整 */
  width:250px;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント!
  1. 長さの異なるボーダーを縦に並べることで「ドネルメニュー(Doner Menu)」を実現
  2. ドネルメニューをクリックするとtransform:scale, translateXYが実行されサイドバーが拡大&下から斜め上にスライドすることに加えて、transform:rotateが実行されサイドバーが手裏剣のように回転しながら現れるアニメーションを実現
  3. ドネルメニューをhoverするとopacityが実行されて透明化する
  4. サイドバーのwidthを40%に調整
  5. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  6. サイドバーのボタンをhoverするとtransform:skewが実行されボタンが斜めに傾くアニメーションとなるように傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる