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

<!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>

  <!-- ドロップダウンメニュー全体 -->
  <div class="fade-in-dropdown-menu_wrap">

    <!-- タイトル -->
    <div class="fade-in-dropdown-menu_title">
      フェードで開閉するドロップダウンメニュー
    </div>

    <!-- 説明文 -->
    <p class="fade-in-dropdown-menu_text">
      ボタンをクリックすると、フェードイン・フェードアウトしながらメニューを開閉できます。
    </p>

    <!-- メニュー全体 -->
    <div class="fade-in-dropdown-menu_box">

      <!-- 開閉ボタン -->
      <button
        class="fade-in-dropdown-menu_button"
        id="fade-in-dropdown-menu-button"
        type="button">
        メニュー
      </button>

      <!-- メニュー項目 -->
      <div
        class="fade-in-dropdown-menu_panel"
        id="fade-in-dropdown-menu-panel">

        <a href="#">ホーム</a>
        <a href="#">サービス</a>
        <a href="#">料金</a>
        <a href="#">お問い合わせ</a>

      </div>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を変更するとページ全体の余白が変わる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* 使用フォント */
  box-sizing:border-box; /* paddingをサイズへ含める */
}

/* ドロップダウンメニュー全体 */
.fade-in-dropdown-menu_wrap{
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40px・左右中央配置 */
  padding:32px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 外枠 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 背景色 */
  font-family:sans-serif; /* 使用フォント */
  box-sizing:border-box; /* paddingをサイズへ含める */
}

/* タイトル */
.fade-in-dropdown-menu_title{
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 太字 */
  margin-bottom:12px; /* 下余白。値を大きくすると説明文との間隔が広がる */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.fade-in-dropdown-menu_text{
  margin-bottom:24px; /* 下余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* 文字色 */
  text-align:center; /* 中央揃え */
  line-height:1.8; /* 行間。値を大きくすると読みやすくなる */
}

/* ボタンとメニューをまとめる */
.fade-in-dropdown-menu_box{
  position:relative; /* メニューをボタン基準で配置する */
  width:240px; /* 横幅。値を大きくするとボタンとメニューが広がる */
  margin:0 auto; /* 中央配置 */
}

/* 開閉ボタン */
.fade-in-dropdown-menu_button{
  width:100%; /* 親要素いっぱいに表示 */
  padding:14px; /* 内側余白。値を大きくするとボタンが大きくなる */
  border:none; /* 枠線なし */
  border-radius:12px; /* ボタンの角丸 */
  background:#2563eb; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:15px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソルを指マークへ変更 */
}

/* ドロップダウンメニュー */
.fade-in-dropdown-menu_panel{
  position:absolute; /* ボタンの下へ配置 */
  top:58px; /* ボタンから58px下へ配置。値を変更すると表示位置が変わる */
  left:0; /* 左端に配置 */
  width:100%; /* ボタンと同じ横幅 */
  padding:8px 0; /* 上下8pxの余白 */
  border:1px solid #d1d5db; /* 枠線 */
  border-radius:12px; /* 角丸 */
  background:#ffffff; /* 背景色 */
  box-shadow:0 16px 32px rgba(15,23,42,.08); /* 影。数値を大きくすると影が広がる */

  /* 初期状態では非表示 */
  opacity:0; /* 完全に透明 */
  visibility:hidden; /* 非表示 */
  transform:translateY(-10px); /* 少し上へ移動した状態 */
  pointer-events:none; /* 非表示中はクリックできない */

  /*
    フェード時間です。
    0.35秒かけて表示・非表示を切り替えます。
    値を大きくするとゆっくり、
    小さくすると速くなります。
  */
  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility .35s ease;
}

/* 表示状態 */
.fade-in-dropdown-menu_panel.is-active{
  opacity:1; /* 不透明にする */
  visibility:visible; /* 表示状態にする */
  transform:translateY(0); /* 元の位置へ移動する */
  pointer-events:auto; /* 表示中はクリック可能 */
}

/* メニュー項目 */
.fade-in-dropdown-menu_panel a{
  display:block; /* 横幅いっぱいをクリック可能にする */
  padding:12px 18px; /* 内側余白 */
  color:#374151; /* 文字色 */
  text-decoration:none; /* 下線を消す */
}

/* マウスを乗せた時 */
.fade-in-dropdown-menu_panel a:hover{
  background:#eff6ff; /* ホバー時の背景色 */
  color:#2563eb; /* ホバー時の文字色 */
}

/* スマートフォン表示 */
@media(max-width:640px){

  .fade-in-dropdown-menu_wrap{
    padding:24px 18px; /* スマートフォンでは余白を小さくする */
  }

}

/* 開閉ボタンを取得 */
const fadeInDropdownMenuButton=
  document.getElementById(
    "fade-in-dropdown-menu-button"
  );

/* ドロップダウンメニューを取得 */
const fadeInDropdownMenuPanel=
  document.getElementById(
    "fade-in-dropdown-menu-panel"
  );

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

    /* is-activeクラスを付け外しして開閉する */
    fadeInDropdownMenuPanel.classList.toggle(
      "is-active"
    );

  }
);