グラデーション背景付きドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

グラデーション背景付きドロワーメニューの作り方

グラデーション背景付きドロワーメニューの作り方を紹介します。このサンプルでは、ボタンをクリックすると画面の左側からドロワーメニューがスライド表示され、メニュー全体へグラデーション背景を適用できます。通常の単色デザインとは異なり、見た目にアクセントを加えられるため、サイトの雰囲気に合わせたナビゲーションを作成したい場合に便利です。

HTMLでドロワーメニューの構造を作成し、CSSでグラデーション背景やスライドアニメーション、レイアウトを設定しています。JavaScriptでは開くボタン、閉じるボタン、背景クリックによる開閉処理を実装しています。お問い合わせページや企業サイト、ポートフォリオサイト、ランディングページなど、さまざまなWebサイトで利用できます。

グラデーションの色や方向、ドロワーメニューの横幅、文字色、ボタンデザイン、余白、表示速度などはコード内から自由に変更できます。レスポンシブ対応のため、スマートフォン・タブレット・PCでも利用しやすく、デザインを変更しながらオリジナルのドロワーメニューを作成したい方にもおすすめです。

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

デモ

グラデーション背景付きドロワーメニュー

ボタンをクリックすると、グラデーション背景のドロワーメニューが表示されます。

「メニューを開く」をクリックすると、グラデーション背景付きのドロワーメニューが表示されます。「閉じる」ボタンまたは背景部分をクリックすると閉じる動作を確認できます。

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

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

    <!-- タイトル -->
    <div class="gradient-background-drawer-menu_title">
      グラデーション背景付きドロワーメニュー
    </div>

    <!-- 説明文 -->
    <p class="gradient-background-drawer-menu_text">
      ボタンをクリックすると、グラデーション背景のドロワーメニューが表示されます。
    </p>

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

  </div>

  <!-- 背景オーバーレイ -->
  <div
    class="gradient-background-drawer-menu_overlay"
    data-drawer-overlay
    aria-hidden="true">

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

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

      <!-- メニュー一覧 -->
      <nav
        class="gradient-background-drawer-menu_nav"
        aria-label="メニュー">

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

      </nav>

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

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成された、背景をグラデーションで装飾したドロワーメニューです。ボタンをクリックすると画面左側からドロワーメニューがスライド表示され、閉じるボタンまたは背景部分をクリックすると非表示になります。

ドロワーメニュー本体にはCSSのlinear-gradientを使用しており、背景画像を用意しなくても印象的なデザインを実現できます。HTMLだけでメニュー項目を追加・削除できるため、ランディングページや企業サイト、ポートフォリオサイトなどにも導入しやすい構成です。

また、スマートフォン・タブレット・PCに対応したレスポンシブレイアウトになっており、小さい画面ではドロワーメニューが画面幅いっぱいに表示されます。配色やメニュー項目、アニメーション速度なども自由に変更できます。 

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

各ファイルの役割
index.html
ドロワーメニュー本体、メニュー項目、開くボタン、閉じるボタンを配置します。メニュー項目を追加・削除したい場合は、このファイルを編集します。

style.css
レイアウト、グラデーション背景、文字色、余白、ボタン、アニメーション、レスポンシブ表示など、見た目全体を設定します。

script.js
ドロワーメニューの表示・非表示、背景クリックによる閉じる処理、ARIA属性の切り替えを制御します。

設置方法・使い方
sampleフォルダ内へ3ファイルを配置します。
そのまま sample/index.html をブラウザで開くと動作を確認できます。
「メニューを開く」をクリックするとグラデーション背景付きドロワーメニューが表示され、「閉じる」または背景部分をクリックすると非表示になります。

カスタマイズできる内容
index.htmlではメニュー項目の追加・削除・並び順・表示文字を自由に変更できます。
style.cssではグラデーションの色、ドロワーメニューの幅、余白、文字サイズ、角丸、影、ボタンデザイン、背景色などを変更できます。
script.jsでは表示・非表示の処理を必要に応じて変更できます。

数値調整
style.css の width:360px; はドロワーメニューの横幅です。値を大きくすると広く、小さくすると細く表示されます。
style.css の padding:28px; はドロワーメニュー内側の余白です。値を大きくすると余白が広がります。
style.css の gap:12px; はメニュー項目同士の間隔です。値を変更すると上下の間隔が変わります。
style.css の animation:gradient-background-drawer-menu-slide .35s ease forwards; の .35s は表示アニメーション時間です。値を大きくするとゆっくり、小さくすると速く表示されます。

レスポンシブ対応
style.css のメディアクエリでレスポンシブ対応しています。
width:100%、max-width:100%、padding を切り替えることで、スマートフォン・タブレット・PCでも画面幅に合わせて表示されます。

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント