ドロップダウンメニュー付きヘッダーを作る方法
ドロップダウンメニュー付きヘッダーを作る方法を紹介します。このサンプルでは、サイト名とナビゲーションメニューを配置したヘッダーに、クリックで開閉できるドロップダウンメニューを追加します。「サービス」の右側に配置したSVGの矢印アイコンを含むボタンをクリックすると、その下にメニューが表示され、もう一度クリックすると閉じる仕組みです。
通常のナビゲーションだけでは項目数が多くなってしまう場合に、関連するページをまとめて表示できます。企業サイトのサービス一覧、ECサイトの商品カテゴリー、会員サイトの各種メニューなど、親となる項目の下へ複数のリンクを整理したい場面に利用できます。JavaScriptではボタンのクリックを検知して開閉状態を切り替え、メニューの表示状態に合わせてSVGの矢印アイコンも回転します。
サイト名、通常のナビゲーション、ドロップダウン内のリンクはHTMLから変更できます。CSSではヘッダーの余白や最大横幅、ドロップダウンメニューの横幅、背景色、枠線、角丸、影、SVGアイコンのサイズなどを調整できます。画面幅が狭くなるとヘッダー内を縦方向へ並べ、メニューを折り返して表示するレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「サービス」をクリックしてください。ドロップダウンメニューが開き、もう一度クリックすると閉じます。開閉状態に合わせて右側のSVG矢印アイコンも回転します。
Q
他のアイコンを使いたい場合はどうするの？
コードをコピーして使おう！
<!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>
<!-- ドロップダウンメニュー付きヘッダー -->
<header class="dropdown-header_header">
<div class="dropdown-header_inner">
<!-- サイト名 -->
<div class="dropdown-header_logo">
Sample Site
</div>
<!-- ナビゲーションメニュー -->
<nav class="dropdown-header_nav" aria-label="メインメニュー">
<a href="#">ホーム</a>
<!-- ドロップダウン -->
<div class="dropdown-header_dropdown">
<!-- ドロップダウン開閉ボタン -->
<button
type="button"
class="dropdown-header_button"
aria-expanded="false"
aria-controls="dropdown-menu"
>
サービス
<!-- 開閉状態を示すSVG矢印アイコン -->
<svg
class="dropdown-header_icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path d="M6 9l6 6 6-6"></path>
</svg>
</button>
<!-- 開閉するメニュー -->
<ul
class="dropdown-header_menu"
id="dropdown-menu"
>
<li>
<a href="#">Web制作</a>
</li>
<li>
<a href="#">デザイン</a>
</li>
<li>
<a href="#">サポート</a>
</li>
</ul>
</div>
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>
</div>
</header>
<!-- ページ内容 -->
<main class="dropdown-header_content">
<p class="dropdown-header_content-title">
ドロップダウンメニュー付きヘッダー
</p>
<p class="dropdown-header_content-text">
「サービス」をクリックするとメニューを開閉できます。
</p>
</main>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
background:#f3f4f6; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* ページ全体で使用するフォント */
}
/* ヘッダー */
.dropdown-header_header{
width:100%; /* ヘッダーを画面幅いっぱいに表示 */
padding:28px 40px; /* 上下28px・左右40px。値を大きくするとヘッダー内の余白が広がる */
border-bottom:1px solid #e5e7eb; /* ヘッダー下部の枠線。1pxを大きくすると線が太くなる */
background:#ffffff; /* ヘッダーの背景色 */
box-shadow:0 4px 18px rgba(15,23,42,.05); /* 4pxは影の縦位置、18pxはぼかし。値を大きくすると影が広がる */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
}
/* ヘッダー内部 */
.dropdown-header_inner{
display:flex; /* サイト名とナビゲーションを横並びにする */
align-items:center; /* 各要素を上下中央へ揃える */
justify-content:space-between; /* サイト名とナビゲーションを左右へ配置 */
gap:40px; /* サイト名とナビゲーションの間隔。値を大きくすると間隔が広がる */
width:100%; /* 使用できる横幅いっぱいに表示 */
max-width:1200px; /* ヘッダー内部の最大横幅。値を大きくすると横に広がる */
margin:0 auto; /* ヘッダー内部を左右中央へ配置 */
}
/* サイト名 */
.dropdown-header_logo{
flex:0 0 auto; /* サイト名の幅を内容に合わせる */
color:#111827; /* サイト名の文字色 */
font-size:20px; /* サイト名の文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* サイト名を太字にする */
line-height:1.4; /* サイト名の行間。値を大きくすると行の高さが広がる */
}
/* ナビゲーションメニュー */
.dropdown-header_nav{
display:flex; /* メニューを横並びにする */
align-items:center; /* メニューを上下中央へ揃える */
gap:8px 24px; /* 縦8px・横24pxの間隔。値を大きくするとメニュー間が広がる */
margin-left:auto; /* ナビゲーションを右側へ寄せる */
}
/* 通常のメニューリンク */
.dropdown-header_nav > a:link,
.dropdown-header_nav > a:visited{
color:#374151; /* メニューの文字色 */
background:transparent; /* メニューの背景を透明にする */
font-size:14px; /* メニューの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:600; /* メニュー文字の太さ */
line-height:1.5; /* メニュー文字の行間。値を大きくすると行の高さが広がる */
text-decoration:none; /* リンクの下線を非表示 */
}
/* 通常のメニューリンク操作時 */
.dropdown-header_nav > a:hover,
.dropdown-header_nav > a:focus,
.dropdown-header_nav > a:active{
color:#2563eb; /* 操作時の文字色 */
background:transparent; /* 操作時も背景を透明にする */
text-decoration:none; /* 操作時も下線を非表示 */
}
/* ドロップダウン全体 */
.dropdown-header_dropdown{
position:relative; /* メニューの絶対配置の基準にする */
}
/* ドロップダウン開閉ボタン */
.dropdown-header_button{
display:flex; /* 文字とSVGアイコンを横並びにする */
align-items:center; /* 文字とSVGアイコンを上下中央へ揃える */
gap:6px; /* 文字とSVGの間隔。値を大きくすると間隔が広がる */
padding:0; /* ボタン内側の追加余白を削除 */
border:0; /* ブラウザ標準の枠線を削除 */
background:transparent; /* ボタンの背景を透明にする */
color:#374151; /* 文字とSVGアイコンの基本色 */
font-family:inherit; /* ページ全体と同じフォントを使用 */
font-size:14px; /* ボタンの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:600; /* ボタン文字の太さ */
line-height:1.5; /* ボタン文字の行間。値を大きくすると行の高さが広がる */
cursor:pointer; /* マウスポインターを指の形にする */
}
/* ドロップダウン開閉ボタン操作時 */
.dropdown-header_button:hover,
.dropdown-header_button:focus{
color:#2563eb; /* 操作時の文字とSVGアイコンの色 */
}
/* SVG矢印アイコン */
.dropdown-header_icon{
display:block; /* SVG下部の余白を防ぐ */
width:16px; /* SVGの横幅。値を大きくするとアイコンが大きくなる */
height:16px; /* SVGの高さ。値を大きくするとアイコンが大きくなる */
transition:transform .3s ease; /* .3秒で回転。値を大きくするとゆっくり、小さくすると速くなる */
}
/* SVG矢印の線 */
.dropdown-header_icon path{
fill:none; /* SVG内部を塗りつぶさない */
stroke:currentColor; /* ボタンのcolorをSVGの線色として使用 */
stroke-width:2; /* SVGの線幅。値を大きくすると線が太くなる */
stroke-linecap:round; /* SVG線の端を丸くする */
stroke-linejoin:round; /* SVG線の接続部分を丸くする */
}
/* メニューを開いたときのSVG */
.dropdown-header_dropdown.is-open .dropdown-header_icon{
transform:rotate(180deg); /* 180度回転して開いている状態を示す */
}
/* ドロップダウンメニュー */
.dropdown-header_menu{
display:none; /* 初期状態ではメニューを非表示 */
position:absolute; /* ヘッダーの高さへ影響させず配置 */
top:calc(100% + 14px); /* ボタン下から14px離して配置。値を大きくすると下へ離れる */
left:50%; /* 親要素の中央を基準に配置 */
z-index:10; /* 他の通常要素より前面へ表示 */
width:220px; /* メニューの横幅。値を大きくすると横に広がる */
margin:0; /* ul要素の標準外側余白を削除 */
padding:8px; /* メニュー内側の余白。値を大きくすると余白が広がる */
border:1px solid #e5e7eb; /* メニューの枠線。1pxを大きくすると線が太くなる */
border-radius:10px; /* メニューの角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* メニューの背景色 */
box-shadow:0 12px 30px rgba(15,23,42,.12); /* 12pxは影の縦位置、30pxはぼかし。値を大きくすると影が広がる */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
list-style:none; /* リストの黒丸を非表示 */
transform:translateX(-50%); /* 自身の横幅の50%戻して中央へ揃える */
}
/* 開いているドロップダウンメニュー */
.dropdown-header_dropdown.is-open .dropdown-header_menu{
display:block; /* is-openが付いたときだけ表示 */
}
/* ドロップダウン内のリスト */
.dropdown-header_menu li{
margin:0; /* リストの外側余白を削除 */
padding:0; /* リストの内側余白を削除 */
}
/* ドロップダウン内のリンク */
.dropdown-header_menu a:link,
.dropdown-header_menu a:visited{
display:block; /* リンク全体をクリックできるようにする */
padding:10px 12px; /* 上下10px・左右12px。値を大きくするとクリック領域が広がる */
border-radius:7px; /* リンク背景の角丸。値を大きくすると丸みが強くなる */
color:#374151; /* リンクの文字色 */
background:#ffffff; /* リンクの背景色 */
font-size:14px; /* リンクの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:500; /* リンク文字の太さ */
line-height:1.5; /* リンク文字の行間。値を大きくすると行の高さが広がる */
text-decoration:none; /* リンクの下線を非表示 */
}
/* ドロップダウン内のリンク操作時 */
.dropdown-header_menu a:hover,
.dropdown-header_menu a:focus,
.dropdown-header_menu a:active{
color:#2563eb; /* 操作時の文字色 */
background:#eff6ff; /* 操作時の背景色 */
text-decoration:none; /* 操作時も下線を非表示 */
}
/* ページ内容 */
.dropdown-header_content{
padding:80px 24px; /* 上下80px・左右24px。値を大きくするとページ内容の余白が広がる */
text-align:center; /* ページ内容を中央揃えにする */
}
/* ページタイトル */
.dropdown-header_content-title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
color:#111827; /* タイトルの文字色 */
font-size:28px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.4; /* タイトルの行間。値を大きくすると行の高さが広がる */
}
/* ページ説明 */
.dropdown-header_content-text{
margin:0; /* ブラウザ標準の外側余白を削除 */
color:#6b7280; /* 説明文の文字色 */
font-size:15px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}
/* 画面幅768px以下 */
@media (max-width:768px){
/* ヘッダー */
.dropdown-header_header{
padding:24px 20px; /* 上下24px・左右20px。値を小さくすると狭い画面で余白を抑えられる */
}
/* ヘッダー内部 */
.dropdown-header_inner{
flex-direction:column; /* サイト名とナビゲーションを縦方向へ配置 */
align-items:flex-start; /* 各要素を左揃えにする */
gap:24px; /* サイト名とナビゲーションの間隔。値を大きくすると縦方向の間隔が広がる */
}
/* ナビゲーションメニュー */
.dropdown-header_nav{
flex-wrap:wrap; /* 横幅が不足した場合にメニューを折り返す */
gap:12px 20px; /* 縦12px・横20px。値を変更すると折り返し時の間隔が変わる */
margin-left:0; /* PC表示で使用した右寄せを解除 */
}
/* ドロップダウンメニュー */
.dropdown-header_menu{
left:0; /* 狭い画面では親要素の左端を基準に配置 */
transform:none; /* PC表示で使用した中央揃えを解除 */
}
}
/* ドロップダウン全体を取得 */
const dropdownHeaderDropdown =
document.querySelector('.dropdown-header_dropdown');
/* ドロップダウン開閉ボタンを取得 */
const dropdownHeaderButton =
document.querySelector('.dropdown-header_button');
/* 開閉ボタンをクリックしたときの処理 */
dropdownHeaderButton.addEventListener('click', function(){
/* is-openクラスを付け外ししてメニューを開閉 */
const dropdownHeaderIsOpen =
dropdownHeaderDropdown.classList.toggle('is-open');
/* 開閉状態をaria-expandedへ反映 */
dropdownHeaderButton.setAttribute(
'aria-expanded',
dropdownHeaderIsOpen ? 'true' : 'false'
);
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q
ダウンロードしたけど、これをネット上で動かすにはどうするの？
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではサイト名、ナビゲーションメニュー、ドロップダウンの開閉ボタン、SVG矢印アイコン、ドロップダウン内のリンクを配置します。CSSではヘッダーとメニューのデザインや開閉時の表示、SVGアイコンの回転を設定し、JavaScriptでは「サービス」をクリックしたときに開閉状態を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはヘッダー全体を構成するファイルです。サイト名、通常のナビゲーションメニュー、「サービス」の開閉ボタン、SVG矢印アイコン、ドロップダウン内の「Web制作」「デザイン」「サポート」のリンクを変更できます。
style.cssはヘッダーとドロップダウンメニューのデザインを設定するファイルです。ヘッダーの余白や最大横幅、メニューの間隔、ドロップダウンの横幅、背景色、枠線、角丸、影、SVGアイコンのサイズや回転などを変更できます。
script.jsはドロップダウンメニューの開閉を行うファイルです。開閉ボタンをクリックするとis-openクラスを付け外しし、メニューの表示状態とaria-expandedの値を切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「サービス」をクリックするとドロップダウンメニューが表示され、もう一度クリックすると閉じます。開閉状態に合わせてSVGの矢印アイコンも上下方向へ切り替わります。
カスタマイズできる内容
index.htmlでは「Sample Site」のサイト名、通常のナビゲーションメニュー、「サービス」の文字、ドロップダウン内のリンク文字やリンク先を変更できます。開閉ボタン内のSVGを差し替えることで、別の開閉アイコンへ変更することもできます。style.cssではヘッダーの背景色、余白、最大横幅、文字色、ドロップダウンメニューの横幅、背景色、枠線、角丸、影、リンクの色、SVGアイコンのサイズなどを変更できます。
数値調整
style.css
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
gap:40px;
サイト名とナビゲーションメニューの間隔です。値を大きくすると両者の間隔が広がります。
max-width:1200px;
ヘッダー内部の最大横幅です。値を大きくすると広い画面で内容が横に広がり、小さくすると中央へまとまります。
gap:8px 24px;
ナビゲーションメニューの間隔です。8pxは折り返した場合の縦方向、24pxは横方向の間隔です。値を大きくするとメニュー同士の間隔が広がります。
gap:6px;
「サービス」の文字とSVG矢印アイコンの間隔です。値を大きくすると文字とアイコンが離れます。
width:16px; / height:16px;
SVG矢印アイコンの大きさです。値を大きくするとアイコンが大きくなり、小さくすると控えめになります。
transition:transform .3s ease;
SVG矢印アイコンが回転する時間です。.3秒で切り替わり、値を大きくするとゆっくり、小さくすると速く回転します。
rotate(180deg)
メニューを開いたときのSVG矢印アイコンの回転角度です。180度回転することで、閉じた状態とは反対方向の矢印になります。
top:calc(100% + 14px);
開閉ボタンとドロップダウンメニューの縦方向の間隔です。14pxを大きくするとメニューが下へ離れ、小さくするとボタンへ近づきます。
width:220px;
ドロップダウンメニューの横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:8px;
ドロップダウンメニュー全体の内側余白です。値を大きくすると枠線とリンクの間隔が広がります。
border-radius:10px;
ドロップダウンメニューの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:10px 12px;
ドロップダウン内の各リンクの内側余白です。上下の10pxを大きくするとリンクが高くなり、左右の12pxを大きくすると文字と端の間隔が広がります。
padding:80px 24px;
ページ内容の内側余白です。上下の80pxを変更するとヘッダーとページ内容の間隔、左右の24pxを変更すると画面端との間隔を調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:1200pxによって、画面幅に合わせてヘッダー内部の横幅が調整されます。画面幅768px以下ではflex-direction:column;によってサイト名とナビゲーションメニューを縦方向へ配置し、ヘッダーの余白をpadding:24px 20px;へ変更します。ナビゲーションメニューは折り返しに対応し、ドロップダウンメニューは左端を基準に表示するため、スマートフォン・タブレット・PCで利用できます。
コメント