フェードイン・フェードアウトで開閉するドロップダウンメニューの作り方
フェードイン・フェードアウトで開閉するドロップダウンメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックするとメニューが上から少し移動しながらフェードインし、閉じるときはフェードアウトしながら非表示になります。HTML・CSS・JavaScriptだけで実装できるため、シンプルな構成で導入しやすく、さまざまなWebサイトへ応用できます。
管理画面の操作メニュー、会員サイトのアカウントメニュー、お問い合わせページのナビゲーション、ECサイトの商品カテゴリ一覧など、限られたスペースへ複数のリンクをまとめたい場面で活用できます。通常のドロップダウンメニューにアニメーションを追加することで、表示・非表示の切り替わりが分かりやすくなり、自然な操作感を実現できます。
ボタンの文字やメニュー項目はHTMLから変更でき、CSSでは背景色、文字色、角丸、余白、影、フェード時間などを調整できます。JavaScriptはクリック時の開閉処理だけを行うシンプルな構成のため、初心者でも内容を理解しやすく、スマートフォン・タブレット・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="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>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロップダウンメニューの構造を作成し、CSSではメニューの見た目やフェードイン・フェードアウトのアニメーションを設定します。JavaScriptではボタンのクリックに合わせてメニューの表示・非表示を切り替えます。シンプルな構成のため、初心者でも各ファイルの役割を理解しながら導入できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはドロップダウンメニュー全体を構成するファイルです。タイトル、説明文、ボタン名、メニュー項目を編集できます。
style.cssはメニュー全体のデザインを設定するファイルです。横幅、余白、背景色、角丸、影、フェードアニメーション、ボタンやメニュー項目のデザインを変更できます。
script.jsはボタンをクリックしたときにメニューを開閉する処理を記述したファイルです。表示・非表示の切り替えを行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「メニュー」ボタンをクリックすると、ドロップダウンメニューがフェードイン・フェードアウトしながら開閉します。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、メニュー項目、リンク先を変更できます。用途に合わせてナビゲーションメニューや管理画面のメニューなどへ利用できます。
style.cssでは全体の横幅、余白、背景色、文字色、ボタンの色、メニューの角丸、影、表示位置、フェード時間を変更できます。
script.jsでは開閉する対象を変更できます。クラス名やIDを変更した場合は取得する要素名も合わせて編集してください。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
width:240px;
ボタンとメニューの横幅です。値を大きくするとメニュー全体が広がります。
top:58px;
メニューの表示位置です。値を変更するとボタンとの間隔が変わります。
padding:14px;
ボタンの内側余白です。値を大きくするとボタンが大きく表示されます。
border-radius:12px;
ボタンとメニューの角丸です。値を大きくすると丸みが強くなります。
transition:.35s;
フェードアニメーションの時間です。0.35秒で表示・非表示を切り替えます。値を大きくするとゆっくり、小さくすると速くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでmax-width:700pxを使用して画面幅に合わせてレイアウトを調整しています。また、640px以下ではpadding:24px 18px;へ変更して余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント