最初から開いているドロップダウンメニューを作る方法
ページを開いた時点でドロップダウンメニューを表示したい場面では、最初から開いている状態で表示する実装が便利です。初めて訪れるユーザーへ重要なメニューを案内したい場合や、操作してほしい項目を最初に見せたい場合などに活用できます。本記事では、HTML・CSS・JavaScriptを使って、ページの表示と同時にドロップダウンメニューが開いた状態になるサンプルを作成します。
サンプルでは、メニューを最初から表示した状態で開始し、その後はボタンをクリックすることで通常のドロップダウンメニューと同じように開閉できます。メニュー項目やボタン名、表示するリンクは自由に変更できるため、お問い合わせページ、管理画面、会員サイト、ナビゲーションメニューなど幅広い場面へ応用できます。
デザインはシンプルな構成になっており、文字や色、余白、角丸、メニュー項目などはコードを書き換えるだけで簡単にカスタマイズできます。ページを開いた直後からメニューを表示したいドロップダウンメニューを作りたい方は、ぜひ参考にしてください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<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="open-dropdown-default_wrap">
<!-- タイトル -->
<div class="open-dropdown-default_title">
ドロップダウンメニュー
</div>
<!-- 説明文 -->
<p class="open-dropdown-default_text">
ページを開くとメニューが最初から表示されます。
</p>
<!-- ドロップダウンメニューの配置エリア -->
<div class="open-dropdown-default_group">
<!-- ボタンとメニューを囲むエリア -->
<div class="open-dropdown-default_area">
<!-- メニューを開閉するボタン -->
<button
class="open-dropdown-default_button"
type="button"
aria-expanded="true"
aria-controls="open-dropdown-default-list">
メニュー
<span class="open-dropdown-default_arrow">▼</span>
</button>
<!-- 最初から表示されるメニュー一覧 -->
<ul
class="open-dropdown-default_list"
id="open-dropdown-default-list">
<!-- ホームへのリンク -->
<li>
<a class="open-dropdown-default_link" href="#">
ホーム
</a>
</li>
<!-- サービスへのリンク -->
<li>
<a class="open-dropdown-default_link" href="#">
サービス
</a>
</li>
<!-- お問い合わせへのリンク -->
<li>
<a class="open-dropdown-default_link" href="#">
お問い合わせ
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ページを開いた時点でドロップダウンメニューが表示された状態になり、JavaScriptでボタンをクリックすると開閉を切り替えられます。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では初期表示の状態やクリック時の開閉処理を変更できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
max-width:280px;
ドロップダウンメニューの最大横幅です。値を変更するとボタンとメニューの横幅が変わります。
padding:14px 18px;
ボタン内の余白です。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
top:calc(100% + 10px);
ボタンとメニューの間隔です。10pxを変更すると表示位置が上下へ移動します。
padding:8px;
メニュー全体の内側余白です。値を大きくすると項目の周囲に余裕ができます。
transition:0.3s;
ボタンやメニューの変化時間です。値を大きくするとゆっくり、小さくすると速く変化します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthを使用しているため、画面幅に応じて自動で縮小表示されます。また、640px以下では内側の余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント