【コピペOK】オシャレなCSSハンバーガーメニューデザイン３選

※当サイトには一部宣伝が含まれます。

今回はデザインを意識したサイトやWebアプリなどでかなり使えるCSSのみで実装したハンバーガーメニューをご紹介いたします。

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

この記事の信頼性（ゆうけんブログの筆者はこんな人）

現役Webデザイナーが執筆
最高月収7桁超のフリーランス
完全未経験から独学でWeb制作スキルを習得
Twitterフォロワー数2,000人超（→@twinzvlog_yk）
Web制作のメンター経験多数
認定ランサー（ランサーズ最高ランク）

ハンバーガーメニューにはtransform:rotateを使用し、hoverするとメニューが回転し、サイドバーの文字がおもちゃみたいな動きをするような遊び心のあるデザインとなっています。

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

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

＼初心者でも安心なサポート体制＆高単価案件／
月収50万円以上のフリーランス案件を探してみる >>

１. hoverで回転＆カタンッと文字が傾くハンバーガーメニュー

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

実際の動きはこちらです

コードはこちら

コードを見る

<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>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </header>
</div>

.hamburger-menu div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:rotateY(0deg);
  /* Y軸(横)の回転角度を指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
  transform:rotateY(180deg);
  /* Y軸(横)の回転角度を指定 */
}
.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 {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  /* アニメーションの時間を0.3秒に指定 */
  font-weight:bold;
  transform:rotate(0deg) translate(0px,0px);
  /* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
  transform:rotate(-3deg) translate(3px,3px);
  /* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

ここがポイント！

シンプルなハンバーガーメニューのサンプルを作成
ハンバーガーメニューをクリックするとサイドバーが表示される
ハンバーガーメニューをhoverすると横に180°回転する
transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
position: absoluteで親要素との絶対位置を指定
サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
サイドバーの文字をhoverするとtransform:rotateとtranslateが実行されカタンッと文字が傾くよう回転角度と移動距離を調整(transformの使い方については【transform完全網羅】hoverで動き出す！transformを網羅できるCSSボタンアニメーション16選)

＼初心者でも安心なサポート体制＆高単価案件／
月収50万円以上のフリーランス案件を探してみる >>

２. hoverで回転＆文字がスベり出すハンバーガーメニュー

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

実際の動きはこちらです

コードはこちら

コードを見る

<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>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </header>
</div>

.hamburger-menu div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:rotateX(0deg);
  /* X軸(縦)の回転角度を指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
  transform:rotateX(180deg);
  /* 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 {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  /* アニメーションの時間を0.3秒に指定 */
  font-weight:bold;
  transform:rotate(0deg) translate(0px,0px) skew(0deg,0deg);
  /* Z軸(平面)の回転角度とXY軸の移動距離、傾斜角度を指定 */
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
  transform:rotate(-3deg) translate(3px,3px) skew(3deg,3deg);
  /* Z軸(平面)の回転角度とXY軸の移動距離、傾斜角度を指定 */
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

ここがポイント！

シンプルなハンバーガーメニューのサンプルを作成
ハンバーガーメニューをクリックするとサイドバーが表示される
ハンバーガーメニューをhoverすると縦に180°回転する
transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
position: absoluteで親要素との絶対位置を指定
サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
サイドバーの文字をhoverするとtransform:rotateとtranslate、skewが実行され文字が滑るようにこちらに向かってくるよう回転角度と移動距離、傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す！transformを網羅できるCSSボタンアニメーション16選)

＼初心者でも安心なサポート体制＆高単価案件／
月収50万円以上のフリーランス案件を探してみる >>

３. hoverで回転＆文字が立体的に浮き出るハンバーガーメニュー

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

実際の動きはこちらです

コードはこちら

コードを見る

<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>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </header>
</div>

.hamburger-menu div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: .5s;
  /* アニメーションの時間を0.5秒に指定 */
  transform:rotate(0deg);
  /* Z軸(平面)の回転角度を指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
  transform:rotate(180deg);
  /* Z軸(平面)の回転角度を指定 */
}
.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 {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  /* アニメーションの時間を0.3秒に指定 */
  font-weight:bold;
  transform:translate(0px,0px) skew(0deg,0deg);
  /* XY軸の移動距離、傾斜角度を指定 */
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
  transform:translate(3px,-3px) skew(-3deg,3deg);
  /* XY軸の移動距離、傾斜角度を指定 */
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

ここがポイント！

シンプルなハンバーガーメニューのサンプルを作成
ハンバーガーメニューをクリックするとサイドバーが表示される
ハンバーガーメニューをhoverすると平面で180°回転する
transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
position: absoluteで親要素との絶対位置を指定
サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
サイドバーの文字をhoverするとtransform:translateとskewが実行され文字が浮き出るよう移動距離と傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す！transformを網羅できるCSSボタンアニメーション16選)