【今だけ無料公開中】Web制作ロードマップ ▶︎

【コピペだけ】CSSでハンバーガーメニューデザイン３選

SHARE

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

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

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

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

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

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

 

この記事の目次
CSSだけで作ったシンプルなハンバーガーメニュー３選

  1. どこにでもありそうなシンプルなハンバーガーメニュー 
  2. hoverすると透過するスタイリッシュなハンバーガーメニュー 
  3. rotateでデザイン性と遊び心のあるハンバーガーメニュー 
 

※突然ですが超オトクな『無料プレゼント』のお知らせです・・

 

今から３日以内に『転職実績No. 1のプログラミングスクール DMM WEBCAMP』へ無料カウンセリング申込＆参加された方のみ限定でもれなく【Amazonギフト券1,000円分】をGETできるキャンペーン

 

完全オンラインレッスンで個別メンター付き。1月中なら期間限定で５万円のキャッシュバックも

 

  無料カウンセリング  ▶︎

 

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

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

実際の動きはこちらです

 

コードはこちら
コードを見る
<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;
}
ここがポイント！
  1. シンプルなハンバーガーメニューのサンプルを作成
  2. ハンバーガーメニューをクリックするとサイドバーが表示される
  3. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  4. position: absoluteで親要素との絶対位置を指定

 

２. 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;
}
ここがポイント！
  1. シンプルなハンバーガーメニューのサンプルを作成
  2. ハンバーガーメニューをクリックするとサイドバーが表示される
  3. ハンバーガーメニュをhoverするとメニューが透過する
  4. transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
  5. position: absoluteで親要素との絶対位置を指定
  6. サイドバーの背景色を白にし、文字の色をグレー、hover時に黒くなるよう指定

 

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

 

『カテゴリー別に紹介』Udemy講座(プログラミング)をご紹介

Web系の講座をスキル別に見たい方におすすめ

【失敗しない】Udemy『ベストセラー講座』12選｜Web系おすすめ

Udemyベストセラー講座を講師ごとに見たい方におすすめ

【最高評価！】Udemy『人気講師』おすすめ講座７選（Web系）

Webエンジニアになりたい方におすすめ

【初心者向け厳選】Udemy『Web開発』おすすめ講座３選

Webデザイナーになりたい方におすすめ

【もう失敗しない】Udemy『Webデザイン』おすすめ講座6選｜独学向け

フロントエンジニアになりたい方におすすめ

【現役エンジニア厳選】Udemy『フロントエンド』おすすめ講座10選

前の記事

【失敗しない】画像(複数)の背景が動くCSSアニメーション３選

次の記事

transitionでCSS画像背景アニメーション３選(画像を…