画像付きドロップダウンメニューを作る方法
画像付きドロップダウンメニューを作る方法を紹介します。このサンプルでは、通常時は「メニューを開く」ボタンだけを表示し、マウスを重ねると画像と項目名を組み合わせたドロップダウンメニューを表示します。文字だけのメニューでは内容を判別しにくい場合でも、サムネイル画像を一緒に表示することで、各項目の内容を視覚的に確認しやすくできます。
ECサイトの商品メニュー、作品や写真の一覧、カテゴリ選択、プロフィールやコンテンツの選択など、画像と項目名をセットで表示したい場面に利用できます。各項目はリンクとして構成しているため、画像と名前を確認しながら目的のページを選択できます。JavaScriptを使用せず、HTMLとCSSだけで表示・非表示を切り替えるシンプルな構成です。
HTMLではメニューボタンの文字、各項目の画像、項目名、リンク先を変更できます。CSSではメニューの横幅、余白、画像サイズ、角丸、背景色、影、項目同士の間隔、表示アニメーションなどを調整できます。画面幅640px以下では全体の余白と画像サイズを小さくしているため、スマートフォン・タブレット・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="image-dropdown-menu_wrap">
<!-- タイトル -->
<div class="image-dropdown-menu_title">
画像付きドロップダウンメニュー
</div>
<!-- 説明文 -->
<p class="image-dropdown-menu_text">
メニューへマウスを重ねると、画像付きの項目を表示します。
</p>
<!-- ドロップダウンメニュー -->
<div class="image-dropdown-menu_menu">
<!-- メニューボタン -->
<button
class="image-dropdown-menu_button"
type="button">
メニューを開く
</button>
<!-- 画像付きメニュー一覧 -->
<ul class="image-dropdown-menu_list">
<!-- 項目1 -->
<li>
<a class="image-dropdown-menu_link" href="#">
<!-- 項目1の画像 -->
<img
class="image-dropdown-menu_thumb"
src="images/image1.jpg"
alt="画像1">
<!-- 項目1の名前 -->
<span class="image-dropdown-menu_name">
項目1
</span>
</a>
</li>
<!-- 項目2 -->
<li>
<a class="image-dropdown-menu_link" href="#">
<!-- 項目2の画像 -->
<img
class="image-dropdown-menu_thumb"
src="images/image2.jpg"
alt="画像2">
<!-- 項目2の名前 -->
<span class="image-dropdown-menu_name">
項目2
</span>
</a>
</li>
<!-- 項目3 -->
<li>
<a class="image-dropdown-menu_link" href="#">
<!-- 項目3の画像 -->
<img
class="image-dropdown-menu_thumb"
src="images/image3.jpg"
alt="画像3">
<!-- 項目3の名前 -->
<span class="image-dropdown-menu_name">
項目3
</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルと、ドロップダウンメニュー内へ表示する3枚の画像で構成されています。HTMLでは「メニューを開く」ボタンと、画像・項目名を組み合わせた3つのリンクを配置します。CSSではメニューの横幅、表示位置、画像サイズ、角丸、影、マウスオーバー時の表示・非表示などを設定します。JavaScriptは使用せず、CSSの:hoverと:focus-withinでメニューを開く構成です。
sample/
├── index.html
├── style.css
└── images/
├── image1.jpg
├── image2.jpg
└── image3.jpg
各ファイルの役割
index.htmlは画像付きドロップダウンメニュー全体を構成するファイルです。「画像付きドロップダウンメニュー」のタイトル、説明文、「メニューを開く」のボタン文字、各項目の画像、項目名、リンク先を変更できます。画像はimages/image1.jpg、images/image2.jpg、images/image3.jpgを読み込む構成です。
style.cssはドロップダウンメニューのデザインと表示動作を設定するファイルです。全体の横幅、余白、メニューボタンのサイズ、矢印、メニュー一覧の位置、背景色、角丸、影、画像サイズ、項目同士の間隔、表示アニメーションなどを変更できます。
imagesフォルダにはメニュー項目へ表示する3枚の画像を配置します。このサンプルではimage1.jpg、image2.jpg、image3.jpgを使用します。画像ファイル自体は利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中へimagesフォルダを作成します。使用する3枚の画像をimage1.jpg、image2.jpg、image3.jpgのファイル名でimagesフォルダへ配置してください。別のファイル名を使用する場合は、index.html内の各srcも実際のファイル名に合わせて変更します。
配置が完了したらsample/index.htmlをブラウザで開きます。「メニューを開く」ボタンへマウスを重ねると、その下に画像付きの3項目が表示されます。マウスをメニュー領域から外すと非表示になります。また、キーボード操作でボタンやメニュー内のリンクへフォーカスした場合にもメニューが表示されます。各項目はリンクになっているため、index.htmlのhrefへ移動先を指定して使用できます。
カスタマイズできる内容
index.htmlでは「画像付きドロップダウンメニュー」のタイトル、「メニューへマウスを重ねると、画像付きの項目を表示します。」の説明文、「メニューを開く」のボタン文字を変更できます。
各メニュー項目ではsrc="images/image1.jpg"などを書き換えることで表示画像を変更できます。altは使用する画像内容に合わせて変更してください。「項目1」「項目2」「項目3」の文字を書き換えるとメニュー項目名を変更できます。各href="#"へURLを指定すると、それぞれ異なるページへのリンクとして利用できます。
style.cssでは全体の最大横幅、メニューの最大横幅、ボタンの余白、角丸、矢印のサイズ、メニュー一覧とボタンの間隔、メニュー一覧の余白、影、画像サイズ、項目内の余白、表示アニメーションの時間などを変更できます。
数値調整
style.css
max-width:700px;
画像付きドロップダウンメニュー全体の最大横幅です。値を大きくすると全体が横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体を囲むエリアの角丸です。値を大きくすると丸みが強くなります。
max-width:420px;
ドロップダウンメニュー部分の最大横幅です。値を大きくするとメニューボタンと一覧が横へ広がります。
padding:14px 16px;
メニューボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の16pxを大きくすると文字と端の間隔が広がります。
border-radius:10px;
メニューボタンの角丸です。値を大きくすると丸みが強くなります。
width:9px;・height:9px;
メニューボタン右側に表示する矢印の大きさです。値を大きくすると矢印が大きくなります。
top:calc(100% + 8px);
メニューボタンとメニュー一覧の間隔です。8pxを大きくするとメニュー一覧が下へ離れ、小さくするとボタンへ近づきます。
padding:8px;
メニュー一覧の内側余白です。値を大きくすると各項目と外枠の間隔が広がります。
border-radius:12px;
メニュー一覧の角丸です。値を大きくすると丸みが強くなります。
box-shadow:0 12px 28px rgba(15,23,42,.14);
メニュー一覧の影です。12pxや28pxを変更すると、影の位置や広がりを調整できます。
transform:translateY(-6px);
非表示時のメニュー一覧の縦位置です。6pxを大きくすると表示開始位置がさらに上側になります。
transition:0.3s;
メニュー一覧の透明度・位置や、ボタンの矢印が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
gap:14px;
各メニュー項目内の画像と項目名の間隔です。値を大きくすると左右の間隔が広がります。
padding:10px;
各メニュー項目の内側余白です。値を大きくすると項目全体が大きくなります。
width:72px;・height:54px;
PC表示時のメニュー画像の大きさです。値を大きくすると画像が大きく表示されます。
border-radius:7px;
メニュー画像の角丸です。値を大きくすると画像の丸みが強くなります。
transition:0.2s;
メニュー項目へマウスを重ねたときに背景色が切り替わる時間です。値を大きくするとゆっくり、小さくすると速く変化します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは全体とメニュー部分へwidth:100%を指定し、それぞれmax-width:700pxとmax-width:420pxで最大横幅を制限しているため、画面幅に合わせて縮小できます。
画面幅640px以下ではページ全体の余白を24px 12px、画像付きドロップダウンメニュー全体の余白を24px 18pxへ縮小します。また、メニュー画像を64px × 48pxへ小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント