【コピペのみ】CSSでハンバーガーメニューデザイン３選｜シンプル

今回はCSSのみで実装したシンプルなハンバーガーメニューをご紹介いたします。

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

ハンバーガーメニューにはtransform:scaleやrotate、opacityなどを使用し、hoverするとメニューが拡大したり傾斜が変わったりするような遊び心のあるデザインとなっています。

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

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

記事の最後では、実務未経験の方でも仕事を取れる求人サイトを紹介しています◎

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

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

この記事をご覧になっているということは、Webエンジニアとして就職または独立したいと考えているかと思います。

そんな方のために現役Webエンジニアの筆者が事前に知っておくべき知識を記事にまとめたので、後で「知っておけばよかった…」となる前に読んでおきましょう！

もうしんどい。Webエンジニアの勉強に疲れたら辞めてもいい。

「大学生プログラミング稼げない」はウソです。３つの致命的な真実

未経験からWeb系エンジニアやめとけ！７つの現実

【真実】プログラミングできない辞めたい..は解決できる。

未経験からプログラマーになったけど辞めたい「５つの本音」

１. どこにでもありそうなシンプルなハンバーガーメニュー

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

実際の動きはこちらです

コードはこちら

コードを見る

<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;
}
.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;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

ここがポイント！

シンプルなハンバーガーメニューのサンプルを作成
ハンバーガーメニューをクリックするとサイドバーが表示される
transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
position: absoluteで親要素との絶対位置を指定

\ エンジニア・Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /
無料登録をして案件を見てみる >>

２. 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秒に指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
}
.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: white;
  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;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: black;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

ここがポイント！

シンプルなハンバーガーメニューのサンプルを作成
ハンバーガーメニューをクリックするとサイドバーが表示される
ハンバーガーメニュをhoverするとメニューが透過する
transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
position: absoluteで親要素との絶対位置を指定
サイドバーの背景色を白にし、文字の色をグレー、hover時に黒くなるよう指定

\ エンジニア・Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /
無料登録をして案件を見てみる >>

３. rotateでデザイン性と遊び心のあるハンバーガーメニュー

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

実際の動きはこちらです

コードはこちら

コードを見る

<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:scale(1,1);
  /* XY軸(横縦)の伸縮率を指定 */
}
.hamburger-menu:hover div {
  opacity:0.6;
  /* 透明度を指定 */
  margin: 8px 0;
  transform:scale(1.1,1.1);
  /* 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 {
  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);
  /* XY軸(横縦)の回転角度を指定 */
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
  transform:rotate(5deg);
  /* XY軸(横縦)の回転角度を指定 */
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

ここがポイント！

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

【学習の次は案件獲得】現職おすすめの求人サイトご紹介

実務は未経験だけど、まず仕事をしてみたい！という方には下で紹介している求人サイトがおすすめ◎

副業・フリーランス案件を多く扱っているサイトなので、わざわざ営業をかけなくても仕事に困りません。

クラウドテック

求人数

(4.0)

求人の質

(5.0)

サポート

(4.0)

信頼性

(5.0)

実績

(5.0)

おすすめ度

(5.0)

総合評価

(5.0)

クラウドテックのポイント

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

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

特徴

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

現役Webエンジニアの筆者がイチオシの求人サイト！副業・フリーランス向けWeb制作案件なら確実に業界トップクラス！営業をかけずに案件獲得できる近道と言えます。しかも、完全無料です。

（求人サイトの後ろ盾があることで、損害賠償◯万円などのリスクも軽減できるので初心者には安心）

\ 実務未経験OK・リモート案件数トップクラスの求人サイト /
クラウドテックに無料登録 >>

もっと詳しく知りたい方は

>> クラウドテックの評判は？未経験OK？口コミ・メリット公開をご覧ください。

まとめ

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

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

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

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

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

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

ロードマップの構成

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

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

2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ！有料公開する際は下の記事は消す可能性が高いので読み忘れのないようにしてくださいね！

以下Twitterでの評判

web制作で稼ぎたい”未経験者”は全員見てほしい。

あとは実行するだけ。こんなに詳細に教えてくれるゆうけんさんに感謝です😭

本当に稼げるのか、未経験の僕が今日から発信していきます！
まずAdobeCCの契約・Udemy教材購入は完了した！ https://t.co/d4Kx5bZdLs

— マル│デザイン×マーケ (@tytmtytm) April 27, 2021