背景が透けるドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

背景が透けるドロワーメニューを作る方法

背景が透けるドロワーメニューは、画面の内容をうっすら見せながらメニューを表示できるデザインです。通常の不透明なドロワーメニューよりも軽やかな印象になり、ポートフォリオサイトやコーポレートサイト、サービス紹介ページなどで見た目にアクセントを加えられます。本記事では、HTML・CSS・JavaScriptだけを使って背景が透けるドロワーメニューを作る方法を紹介します。

サンプルでは、「メニューを開く」ボタンをクリックすると左側からドロワーメニューがスライド表示されます。ドロワーメニューには半透明の背景を設定しているため、背後のページをうっすら見せながら表示できます。また、「閉じる」ボタンと背景部分のクリックでドロワーメニューを閉じられるため、一般的なWebサイトでも使いやすい動作になっています。

メニュー項目の追加や削除、表示する文章の変更はもちろん、背景の透明度や色、ドロワーメニューの幅、余白、角丸なども自由に調整できます。スマートフォン・タブレット・PCでも利用できるレスポンシブ対応のサンプルなので、さまざまなWebサイトへ導入しやすい構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

背景が透けるドロワーメニュー

ボタンをクリックすると、背景が透けるドロワーメニューが表示されます。

「メニューを開く」をクリックすると、背景が透けるドロワーメニューが左側から表示されます。「閉じる」または背景部分をクリックするとドロワーメニューを閉じることができます。

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

<!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="transparent-drawer-menu_wrap">

    <!-- タイトル -->
    <div class="transparent-drawer-menu_title">
      背景が透けるドロワーメニュー
    </div>

    <!-- 説明文 -->
    <p class="transparent-drawer-menu_text">
      ボタンをクリックすると、背景が透けるドロワーメニューを表示できます。
    </p>

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

  </div>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="transparent-drawer-menu_overlay"
    data-drawer-overlay
    aria-hidden="true">

    <!-- ドロワーメニュー本体 -->
    <aside
      class="transparent-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="transparent-drawer-menu-title">

      <!-- ドロワーメニューのタイトル -->
      <div
        class="transparent-drawer-menu_drawer-title"
        id="transparent-drawer-menu-title">
        メニュー
      </div>

      <!-- ドロワーメニューの説明文 -->
      <p class="transparent-drawer-menu_drawer-text">
        半透明の背景で表示されるドロワーメニューです。
      </p>

      <!-- メニュー一覧 -->
      <nav class="transparent-drawer-menu_nav">

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

      </nav>

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

    </aside>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ボタンをクリックすると左側からドロワーメニューが表示され、背景が半透明になり、ドロワーメニュー本体も透けたデザインで表示されます。背景にはぼかし効果も適用されるため、後ろのコンテンツを見せながらメニューを表示できます。

レイアウトや色はCSSで管理し、ドロワーメニューの開閉はJavaScriptで制御しています。それぞれの役割が分かれているため、見た目だけ変更したい場合や動作だけ変更したい場合も編集しやすい構成です。

配布ファイルをそのまま配置するだけで利用でき、背景色や透過率、ぼかしの強さ、メニュー項目なども自由に変更できます。管理画面やポートフォリオサイト、サービス紹介ページなど、背景を活かしたデザインのWebサイトにも利用しやすいサンプルです。 

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

各ファイルの役割
index.html
ドロワーメニューのHTMLを記述しています。タイトル・説明文・メニュー項目・ボタンの文章を編集できます。

style.css
ドロワーメニュー全体のレイアウト、背景色、透過率、ぼかし効果、文字色、余白、角丸、影、アニメーションを管理しています。デザインを変更したい場合はこちらを編集します。

script.js
ドロワーメニューの表示・非表示を制御しています。開くボタン・閉じるボタン・背景クリック時の動作を管理しています。

設置方法・使い方
sampleフォルダ内の3ファイルを同じ場所へ配置します。
index.htmlをブラウザで開くとサンプルを確認できます。
「メニューを開く」をクリックすると背景が透けたドロワーメニューが表示され、「閉じる」ボタンまたは背景部分をクリックすると閉じます。

カスタマイズできる内容
index.htmlではタイトル・説明文・メニュー項目・ボタンの文字を変更できます。
style.cssでは背景色、透過率、ぼかしの強さ、文字色、余白、角丸、影、ドロワーメニューの横幅、アニメーション速度を変更できます。
script.jsでは開閉する対象やクリック時の動作を変更できます。

数値調整
style.cssの「background:rgba(255,255,255,.22);」の「.22」は背景の透過率です。値を大きくすると透けにくくなり、小さくすると背景がより透けて見えます。

style.cssの「backdrop-filter:blur(12px);」の「12px」は背景をぼかす強さです。値を大きくするとぼかしが強くなり、小さくすると背景が見えやすくなります。

style.cssの「width:360px;」はドロワーメニューの横幅です。値を変更するとメニューの幅が変わります。

style.cssの「animation:transparent-drawer-menu-slide .35s ease forwards;」の「.35s」は表示アニメーション時間です。値を大きくするとゆっくり表示され、小さくすると素早く表示されます。

レスポンシブ対応
style.cssでレスポンシブ対応しています。max-width:90%、width:100%、paddingの調整、media queryを使用し、スマートフォン・タブレット・PCでも画面幅に合わせてレイアウトが自動調整されます。狭い画面ではドロワーメニューが画面幅いっぱいに表示され、操作しやすいサイズになります。

こちらもおすすめ

ドロワーメニュー
ドロワーメニューのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント