フェードイン・フェードアウトするドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

フェードイン・フェードアウトするドロワーメニューの作り方

フェードイン・フェードアウトするドロワーメニューの作り方を紹介します。「メニューを開く」ボタンをクリックすると、ドロワーメニューが透明な状態から徐々に表示されます。閉じる操作を行うと、反対に透明になりながら非表示になります。

このサンプルはHTML・CSS・JavaScriptだけで動作します。CSSのopacityとvisibilityを使用して表示状態を切り替え、transitionによってフェードアニメーションを加えています。閉じるボタン、背景部分、またはメニュー項目をクリックするとドロワーメニューを閉じられます。

サービスサイト、会員ページ、管理画面、キャンペーンページなど、強いスライド移動を使わずにメニューを自然に表示したい場面で利用できます。フェード速度、背景の暗さ、メニューの横幅、色、余白、角丸、影、メニュー項目はコード内で変更できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

フェードするドロワーメニュー

「メニューを開く」をクリックすると、ドロワーメニューが徐々に表示されます。

「メニューを開く」をクリックするとフェードインで表示されます。閉じるボタン、背景部分、またはメニュー項目をクリックするとフェードアウトで閉じます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>フェードイン・フェードアウトするドロワーメニュー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ドロワーメニューを開く操作エリア -->
  <main class="fade-drawer-menu_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="fade-drawer-menu_title">
      フェードするドロワーメニュー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="fade-drawer-menu_text">
      「メニューを開く」をクリックすると、ドロワーメニューが徐々に表示されます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="fade-drawer-menu_open"
      type="button"
      data-fade-drawer-menu-open>
      メニューを開く
    </button>

  </main>

  <!-- ドロワーメニュー表示中の背景 -->
  <div
    class="fade-drawer-menu_overlay"
    data-fade-drawer-menu-overlay>
  </div>

  <!-- ドロワーメニュー本体 -->
  <aside
    class="fade-drawer-menu_drawer"
    data-fade-drawer-menu-drawer
    aria-hidden="true">

    <!-- ドロワーメニュー上部 -->
    <div class="fade-drawer-menu_header">

      <!-- ドロワーメニューのタイトル -->
      <div class="fade-drawer-menu_heading">
        メニュー
      </div>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="fade-drawer-menu_close"
        type="button"
        data-fade-drawer-menu-close
        aria-label="閉じる">
      </button>

    </div>

    <!-- ナビゲーションメニュー -->
    <nav
      class="fade-drawer-menu_nav"
      aria-label="メインメニュー">

      <a
        class="fade-drawer-menu_link"
        href="#home"
        data-fade-drawer-menu-link>
        ホーム
      </a>

      <a
        class="fade-drawer-menu_link"
        href="#service"
        data-fade-drawer-menu-link>
        サービス
      </a>

      <a
        class="fade-drawer-menu_link"
        href="#news"
        data-fade-drawer-menu-link>
        お知らせ
      </a>

      <a
        class="fade-drawer-menu_link"
        href="#contact"
        data-fade-drawer-menu-link>
        お問い合わせ
      </a>

    </nav>

  </aside>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* すべての要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ドロワーメニューを開く操作エリア */
.fade-drawer-menu_wrap{
  width:100%; /* 画面幅に合わせて縮小する */
  max-width:700px; /* 操作エリアの最大横幅 */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 操作エリア内側の余白 */
  border:1px solid #e5e7eb; /* 操作エリアの枠線 */
  border-radius:18px; /* 操作エリアの角丸 */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* 内容を中央揃え */
}

/* 操作エリアのタイトル */
.fade-drawer-menu_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 操作エリアの説明文 */
.fade-drawer-menu_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* ドロワーメニューを開くボタン */
.fade-drawer-menu_open{
  padding:12px 26px; /* ボタン内側の上下・左右余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* ドロワーメニュー表示中の背景 */
.fade-drawer-menu_overlay{
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9998; /* ドロワーメニューより背面へ表示 */
  background:rgba(15,23,42,.6); /* 背景色。.6を大きくすると暗くなる */
  opacity:0; /* 初期状態では透明 */
  visibility:hidden; /* 初期状態では操作できないようにする */
  transition:
    opacity .35s,
    visibility .35s; /* 0.35秒で背景をフェード表示・非表示にする */
}

/* 背景の表示状態 */
.fade-drawer-menu_overlay.is-active{
  opacity:1; /* 背景を表示 */
  visibility:visible; /* 背景を操作可能にする */
}

/* ドロワーメニュー本体 */
.fade-drawer-menu_drawer{
  position:fixed; /* 画面左側へ固定 */
  top:0; /* 画面上端へ配置 */
  left:0; /* 画面左端へ配置 */
  z-index:9999; /* 背景より前面へ表示 */
  width:320px; /* ドロワーメニューの横幅 */
  max-width:85%; /* 画面幅の85%を超えないようにする */
  height:100vh; /* 画面の高さいっぱいへ広げる */
  padding:28px 24px; /* 上下28px・左右24pxの内側余白 */
  background:#ffffff; /* ドロワーメニューの背景色 */
  box-shadow:12px 0 30px rgba(15,23,42,.18); /* 右側へ表示する影 */
  opacity:0; /* 初期状態では透明 */
  visibility:hidden; /* 初期状態では操作できないようにする */
  transition:
    opacity .35s ease,
    visibility .35s ease; /* 0.35秒でフェードイン・フェードアウトする */
  overflow-y:auto; /* 内容が長い場合は縦スクロール可能にする */
}

/* ドロワーメニューの表示状態 */
.fade-drawer-menu_drawer.is-active{
  opacity:1; /* ドロワーメニューを表示 */
  visibility:visible; /* ドロワーメニューを操作可能にする */
}

/* ドロワーメニュー上部 */
.fade-drawer-menu_header{
  display:flex; /* タイトルと閉じるボタンを横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  justify-content:space-between; /* 左右へ分けて配置 */
  gap:16px; /* タイトルと閉じるボタンの間隔 */
  margin-bottom:28px; /* 下側28pxの余白 */
}

/* ドロワーメニューのタイトル */
.fade-drawer-menu_heading{
  margin:0; /* 外側余白をなくす */
  color:#111827; /* タイトルの文字色 */
  font-size:26px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* ドロワーメニューを閉じるボタン */
.fade-drawer-menu_close{
  position:relative; /* ×印を配置する基準 */
  flex-shrink:0; /* ボタンが縮まないようにする */
  width:42px; /* ボタンの横幅 */
  height:42px; /* ボタンの高さ */
  padding:0; /* ボタン内側の余白をなくす */
  border:1px solid #cbd5e1; /* ボタンの枠線 */
  border-radius:10px; /* ボタンの角丸 */
  background:#f8fafc; /* ボタンの背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 閉じるボタンの2本の線 */
.fade-drawer-menu_close::before,
.fade-drawer-menu_close::after{
  content:""; /* 擬似要素を表示 */
  position:absolute; /* ボタン中央へ配置 */
  top:50%; /* 上端から50%の位置 */
  left:50%; /* 左端から50%の位置 */
  width:20px; /* 線の長さ */
  height:2px; /* 線の太さ */
  border-radius:2px; /* 線の角を丸くする */
  background:#111827; /* ×印の色 */
}

/* ×印の1本目 */
.fade-drawer-menu_close::before{
  transform:translate(-50%,-50%) rotate(45deg); /* 線を右下がりへ傾ける */
}

/* ×印の2本目 */
.fade-drawer-menu_close::after{
  transform:translate(-50%,-50%) rotate(-45deg); /* 線を左下がりへ傾ける */
}

/* ナビゲーションメニュー */
.fade-drawer-menu_nav{
  display:flex; /* メニュー項目を並べる */
  flex-direction:column; /* メニュー項目を縦並びにする */
  gap:12px; /* メニュー項目同士の間隔 */
}

/* ナビゲーションリンク */
.fade-drawer-menu_link{
  display:block; /* リンク全体をクリック可能にする */
  padding:16px 18px; /* リンク内側の上下・左右余白 */
  border-radius:10px; /* リンクの角丸 */
  background:#f1f5f9; /* リンクの背景色 */
  color:#111827; /* リンクの文字色 */
  font-size:17px; /* リンクの文字サイズ */
  font-weight:700; /* リンク文字を太字にする */
  line-height:1.5; /* リンク文字の行間 */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* ナビゲーションリンクへマウスを重ねた状態 */
.fade-drawer-menu_link:hover{
  background:#dbeafe; /* マウスを重ねた時の背景色 */
  color:#1d4ed8; /* マウスを重ねた時の文字色 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
  }

  /* スマートフォン用の操作エリア */
  .fade-drawer-menu_wrap{
    margin:24px auto; /* 上下24pxの余白へ変更 */
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

  /* スマートフォン用のドロワーメニュー */
  .fade-drawer-menu_drawer{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

}

// ドロワーメニューを開くボタンを取得
const fadeDrawerMenuOpen=document.querySelector(
  "[data-fade-drawer-menu-open]"
);

// ドロワーメニューを閉じるボタンを取得
const fadeDrawerMenuClose=document.querySelector(
  "[data-fade-drawer-menu-close]"
);

// ドロワーメニュー表示中の背景を取得
const fadeDrawerMenuOverlay=document.querySelector(
  "[data-fade-drawer-menu-overlay]"
);

// ドロワーメニュー本体を取得
const fadeDrawerMenuDrawer=document.querySelector(
  "[data-fade-drawer-menu-drawer]"
);

// ドロワーメニュー内のリンクをすべて取得
const fadeDrawerMenuLinks=document.querySelectorAll(
  "[data-fade-drawer-menu-link]"
);

// ドロワーメニューを開く共通処理
function openFadeDrawerMenu(){

  // 背景へ表示用クラスを追加
  fadeDrawerMenuOverlay.classList.add("is-active");

  // ドロワーメニューへ表示用クラスを追加
  fadeDrawerMenuDrawer.classList.add("is-active");

  // ドロワーメニューを表示状態へ変更
  fadeDrawerMenuDrawer.setAttribute("aria-hidden","false");

}

// ドロワーメニューを閉じる共通処理
function closeFadeDrawerMenu(){

  // 背景から表示用クラスを削除
  fadeDrawerMenuOverlay.classList.remove("is-active");

  // ドロワーメニューから表示用クラスを削除
  fadeDrawerMenuDrawer.classList.remove("is-active");

  // ドロワーメニューを非表示状態へ変更
  fadeDrawerMenuDrawer.setAttribute("aria-hidden","true");

}

// 開くボタンをクリックした時
fadeDrawerMenuOpen.addEventListener("click",function(){

  // ドロワーメニューを開く
  openFadeDrawerMenu();

});

// 閉じるボタンをクリックした時
fadeDrawerMenuClose.addEventListener("click",function(){

  // ドロワーメニューを閉じる
  closeFadeDrawerMenu();

});

// 背景部分をクリックした時
fadeDrawerMenuOverlay.addEventListener("click",function(){

  // ドロワーメニューを閉じる
  closeFadeDrawerMenu();

});

// 各メニューリンクへクリック処理を設定
fadeDrawerMenuLinks.forEach(function(link){

  // メニューリンクをクリックした時
  link.addEventListener("click",function(){

    // ドロワーメニューを閉じる
    closeFadeDrawerMenu();

  });

});

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでドロワーメニュー本体と開閉ボタンを配置し、CSSのopacity・visibility・transitionを使ってフェードイン・フェードアウトを実装しています。JavaScriptでは、ボタン操作に応じて表示用クラスを追加・削除します。

ドロワーメニューは画面左側へ固定されていますが、横方向へ移動せず、透明な状態から徐々に表示されます。閉じる操作では反対に透明になりながら非表示になります。背景のオーバーレイも同じ時間でフェードするため、メニューと背景が自然に切り替わります。

メニュー項目や文章はindex.html、色や横幅、余白、フェード時間はstyle.cssで変更できます。開くボタン、閉じるボタン、背景部分、メニュー項目による開閉処理はscript.jsにまとめられています。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
操作エリア、メニューを開くボタン、オーバーレイ、ドロワーメニュー本体、閉じるボタン、ナビゲーション項目を配置しています。タイトル、説明文、メニュー名、リンク先を変更すると表示内容が変わります。

style.css
ページ全体、操作エリア、ボタン、オーバーレイ、ドロワーメニュー、閉じるボタン、ナビゲーションのデザインを設定しています。opacityとvisibilityを変更することで表示状態を切り替え、transitionによってフェードアニメーションを実現しています。

script.js
開くボタン、閉じるボタン、オーバーレイ、メニューリンクを取得し、クリック時にis-activeクラスを追加・削除します。aria-hiddenも同時に変更し、ドロワーメニューの表示状態を管理しています。

設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを配置します。3ファイルは同じ階層に置いてください。sample/index.htmlをブラウザで開くと動作を確認できます。

「メニューを開く」をクリックすると、ドロワーメニューと背景がフェードインします。閉じるボタン、背景部分、またはメニュー項目をクリックするとフェードアウトします。

カスタマイズできる内容
index.htmlでは、操作エリアのタイトルと説明文、ドロワーメニューのタイトル、ホーム・サービス・お知らせ・お問い合わせの項目名とリンク先を変更できます。

style.cssでは、操作エリアやボタンの色、ドロワーメニューの横幅、背景色、文字色、余白、角丸、影を変更できます。フェード速度はオーバーレイとドロワーメニューに設定されているtransitionで調整できます。

script.jsでは、どのボタンやリンクでドロワーメニューを開閉するかを変更できます。開閉時に使用するis-activeクラスは、style.cssの表示状態と対応しています。

数値調整
style.css
width:320px;
ドロワーメニューの横幅です。値を大きくすると幅が広くなり、小さくすると狭くなります。

style.css
max-width:85%;
画面幅に対するドロワーメニューの最大幅です。小さい画面でメニューが画面外へはみ出すことを防ぎます。

style.css
opacity .35s
0.35秒でドロワーメニューとオーバーレイがフェードします。値を大きくするとゆっくり、小さくすると速く切り替わります。

style.css
background:rgba(15,23,42,.6);
0.6はオーバーレイの不透明度です。値を大きくすると背景が暗くなり、小さくすると明るく見えます。

style.css
padding:28px 24px;
ドロワーメニュー内側の上下・左右の余白です。値を変更するとタイトルやメニュー項目の配置間隔が変わります。

レスポンシブ対応
style.cssのwidth:100%、max-width:700px、max-width:85%を使い、画面幅に合わせて操作エリアとドロワーメニューが縮小される構成です。

画面幅640px以下ではmedia queryによってbody、操作エリア、ドロワーメニューの余白を小さくしています。スマートフォン・タブレット・PCで利用できます。