営業ナシでWeb制作案件が舞い込んでくる”新世代”戦略 ▶︎

【絶対失敗しない】hoverで動くオシャレなハンバーガーメニュー３選【CSSのみ】

SHARE

今回は遊び心のあるハンバーガーメニューにしたい方向けのマテリアルデザインをCSSのみで実装しました。

hoverやクリック（タップ）でデザインに大きな変化が起きるよう作ったのでWeb制作やWebアプリケーション等で楽しみながらそのままお使いいただけるようなマテリアルデザインになっています。

ハンバーガーメニューのサイドバーにはtransformをふんだんに使用し、hoverするとボタンがborderを使って超立体的に動き出し、ずっと触っていたくなるような飽きないデザインサンプルとなっています。

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

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

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

 

この記事の目次
CSSだけで作ったおもちゃみたいなハンバーガーメニュー３選

  1. ボタンが崩れ落ちていきそうな動きをするハンバーガーメニュー 
  2. ボタンが今まさにスベり出すかのような動きをするハンバーガーメニュー 
  3. ボタンが3Dで挨拶するかのように動き出すハンバーガーメニュー 

 

１. ボタンが崩れ落ちていきそうな動きをするハンバーガーメニュー

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

実際の動きはこちらです

 

コードはこちら
コードを見る
<div>
  <a href="#sidemenu" class="hamburger-menu">
    <div></div>
    <div></div>
    <div></div>
  </a>
  <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 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:skewX(0deg);
  /* X軸(横)の傾斜角度を指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
  transform:skewX(70deg);
  /* X軸(横)の傾斜角度を指定 */
}
.hamburger-menu + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 100%;
  display:block;
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  /* アニメーションの時間を0.3秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
}
.sidebar-btn a {
  padding: 8px 8px 8px 8px;
  border:1px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transform:rotate(0deg) translate(0px,0px);
  /* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
}
.sidebar-btn a:hover {
  color: white;
  transform:rotate(-3deg) translate(3px,5px);
  /* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
}
.sidenavs p {
  margin:30px auto;
  width:250px;
  border:1px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント！
  1. シンプルなハンバーガーメニューのサンプルを作成
  2. ハンバーガーメニューをクリックするとサイドバーが表示される
  3. ハンバーガーメニューをhoverするとskewが実行されて横に70°傾く
  4. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  5. position: absoluteで親要素との絶対位置を指定
  6. サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
  7. サイドバーの文字をborderで囲ってボタンを作り、その背面にも同じようにborderを用意
  8. サイドバーのボタンをhoverするとtransform:rotateとtranslateが実行されボタンが今にも立体的に崩れ落ちそうになるように回転角度と移動距離を調整(transformの使い方については【transform完全網羅】hoverで動き出す！transformを網羅できるCSSボタンアニメーション16選)

 

２.ボタンが今まさにスベり出すかのような動きをするハンバーガーメニュー

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

実際の動きはこちらです

 

コードはこちら
コードを見る
<div>
  <a href="#sidemenu" class="hamburger-menu">
    <div></div>
    <div></div>
    <div></div>
  </a>
  <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 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:skewY(0deg);
  /* X軸(縦)の傾斜角度を指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
  transform:skewY(-5deg);
  /* X軸(縦)の傾斜角度を指定 */
}
.hamburger-menu + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 100%;
  display:block;
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  /* アニメーションの時間を0.3秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
}
.sidebar-btn a {
  padding: 8px 8px 8px 8px;
  border:1px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transform:rotate(0deg) translate(0px,0px) skew(0deg,0deg);
  /* Z軸(平面)の回転角度とXY軸の移動距離、傾斜角度を指定 */
}
.sidebar-btn a:hover {
  color: white;
  transform:rotate(-3deg) translate(4px,4px) skew(4deg,3deg);
  /* Z軸(平面)の回転角度とXY軸の移動距離、傾斜角度を指定 */
}
.sidenavs p {
  margin:30px auto;
  width:250px;
  border:1px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント！
  1. シンプルなハンバーガーメニューのサンプルを作成
  2. ハンバーガーメニューをクリックするとサイドバーが表示される
  3. ハンバーガーメニューをhoverするとskewが実行されて縦に5°傾く
  4. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  5. position: absoluteで親要素との絶対位置を指定
  6. サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
  7. サイドバーの文字をborderで囲ってボタンを作り、その背面にも同じようにborderを用意
  8. サイドバーのボタンをhoverするとtransform:rotateとtranslate、skewが実行されボタンがまるで浮き上がりながらスベり出すかのように回転角度と移動距離、傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す！transformを網羅できるCSSボタンアニメーション16選)

 

３. ボタンが3Dで挨拶するかのように動き出すハンバーガーメニュー

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

実際の動きはこちらです

 

コードはこちら
コードを見る
<div>
  <a href="#sidemenu" class="hamburger-menu">
    <div></div>
    <div></div>
    <div></div>
  </a>
  <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 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:skew(0deg,0deg);
  /* XY軸(横縦)の傾斜角度を指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
  transform:skew(70deg,-15deg);
  /* XY軸(横縦)の傾斜角度を指定 */
}
.hamburger-menu + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 100%;
  display:block;
}
.sidenavs:target {
  overflow-x: hidden;
  /* ボックスからはみ出る箇所を隠す */
  width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  /* 画像の配置を指定 */
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  /* 横スクロールを無効にする */
  padding-top: 60px;
  transition: 0.5s;
  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  /* アニメーションの時間を0.3秒に指定 */
  font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
}
.sidebar-btn a {
  padding: 8px 8px 8px 8px;
  border:1px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
  transform:translate(0px,0px) skew(0deg,0deg);
  /* XY軸の移動距離、傾斜角度を指定 */
}
.sidebar-btn a:hover {
  color: white;
  transform:translate(5px,-5px) skew(-5deg,3deg);
  /* XY軸の移動距離、傾斜角度を指定 */
}
.sidenavs p {
  margin:30px auto;
  width:250px;
  border:1px solid white;
  border-radius:10px;
  /* ボーダーにradiusで丸みをつける */
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
ここがポイント！
  1. シンプルなハンバーガーメニューのサンプルを作成
  2. ハンバーガーメニューをクリックするとサイドバーが表示される
  3. ハンバーガーメニューをhoverするとskewが実行されて大きく傾き立体的になる
  4. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  5. position: absoluteで親要素との絶対位置を指定
  6. サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
  7. サイドバーの文字をborderで囲ってボタンを作り、その背面にも同じようにborderを用意
  8. サイドバーのボタンをhoverするとtransform:translateとskewが実行されボタンがまるで挨拶でもするかのように浮き上がるよう移動距離と傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す！transformを網羅できるCSSボタンアニメーション16選)

 

『絶対にリモートワーク！』という方におすすめの求人サイト

クラウドテック
Web制作案件の数
(5.0)
案件の単価
(4.0)
使いやすさ
(5.0)
案件獲得効率
(5.0)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター

 

公式サイト
クラウドテック公式ページ

特徴

  • クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
  • 実務未経験者でもOK
  • 登録社数14万社
  • フリーランス・個人事業主向け案件がケタ違いに多い
  • 報酬額や勤務地・職種など希望が通りやすい
  • Web制作・コーディングの高単価案件が多い
  • リモートワーク案件数は業界トップクラス
  • 最短3日で案件を獲得できる

 

現役Webデザイナーの筆者イチオシの求人サイト！フリーランス向けWeb制作案件なら確実に業界トップクラス。営業かけずに案件に困らなくなる一番の近道です。

ふたご

 

無料で登録してみる >>

 

 

まとめ

HTMLとCSSを使うと今回紹介したようなことも簡単にできてしまうんです。

 

『CSSアニメーションやエフェクトだけではなくWebサイトをゼロから作って稼いでいきたい』

『３ヶ月くらいで最低でも月10万円は稼ぎたい』

『営業とかやったことないけどWeb制作だけで稼いでいきたい』

 

こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー（Web制作）独学ロードマップを執筆しました。

 

少額の投資で３ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)

 

ロードマップの構成
  1. Web制作に特化した『確実に身に付く』学習方法
  2. Web制作会社が喰いつく理想的なポートフォリオの作成手順
  3. 返信率10％以上！Web制作会社へのメール営業

 

有料公開も考えましたが「Webデザイナー（Web制作）はまだまだ稼げることを証明したい！」という思いが強く、期間限定で無料公開をすることにしました。

 

2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ！

> 【裏ワザ】Webデザイナー独学ロードマップ（Web制作で稼ぐ）

 

前の記事

【コピペOK】Web制作で使えるオシャレなCSSハンバーガーメ…

次の記事

マウスオーバーで画像背景が切り替わるCSS【trasition…