この記事では、実務で作成したシンプルなドロップダウンメニューのソースコードとレイアウトの作成方法を紹介します。
はじめに
ドロップダウンメニューを実装する理由
ドロップダウンメニューは、限られたスペースを効率的に活用し、ユーザーに多くの選択肢を提供するために実装されます。特に、多くのカテゴリーやページがあるウェブサイトでは、ドロップダウンメニューによってユーザーのナビゲーションをスムーズにし、情報へのアクセスを容易にします。
この記事で学べること
この記事を通じて、読者は以下のことを学べます。
CSSを使ったスタイリング方法とデザインのヒント
ドロップダウンメニューとは?
ドロップダウンメニューは、ウェブサイトのナビゲーション要素の一つで、ユーザーがメニュー項目にマウスを合わせるか、クリックすると、開かれるメニューのことです。
ドロップダウンメニューの構造
一般的に、ドロップダウンメニューは親メニュー項目とその下に配置される子メニュー項目から構成されます。親メニューは通常、ナビゲーションバーに表示され、子メニューは親メニューにマウスを合わせたときに展開されます。この階層構造は、ユーザーが求める情報に直感的にアクセスできるようにするために重要です。
ドロップダウンメニューのレイアウト
今回作成したものはマウスホバーで開くドロップダウンメニューになっています。そのため、スマホだと動きが確認できません。PCでご覧ください。
スマホで見た時のレイアウト
スマホで見たときはPCのドロップダウンメニューの部分はアコーディオンメニューで実装しています。
どのようなアコーディオンメニューを作成したかは下記記事で紹介しているのでご覧ください。
ハンバーガーメニューを作成しました。3本線からバツ印に変わるボタン、右からスライドしてくる第2階層もあるハンバーガーメニューです。ソースコードも紹介しています。
ソースコード例
HTMLソースコード例
PR
<header class="header">
<div class="inner">
<h1 class="site-title">
<!-- サイト名やサイトのロゴ -->
</h1>
<nav class="header-menu">
<ul class="header-menu__list">
<li class="header-menu__item pc">
<a href="#">
<span class="ja">メニュー1</span>
<span class="en">Memu01</span>
</a>
</li>
<li class="header-menu__item has-child">
<span class="ja">メニュー2</span>
<span class="en">Menu02</span>
<ul class="header-menu__list02">
<li class="header-menu__item02">
<a href="#">メニュー2-1</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー2-2</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー2-3</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー2-4</a>
</li>
</ul>
</li>
<li class="header-menu__item pc">
<a href="#">
<span class="ja">メニュー3</span>
<span class="en">Memu03</span>
</a>
</li>
</ul>
</nav>
</div>
</header>
CSSソースコード例
.header {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background-color: #fff;
transition: all 0.3s;
z-index: 9999;
}
header .inner {
display: flex;
position: relative;
height: 100%;
padding: 0;
align-items: center;
justify-content: center;
max-width: 1140px;
margin: 0 auto;
}
.site-title a {
white-space: nowrap;
display: block;
font-size: 20px;
line-height: 70px;
}
.header-menu {
width: 100%;
}
.header-menu__list {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
background-color: #fff;
}
.header-menu__item {
position: relative;
text-align: center;
font-size: 14px;
font-weight: 700;
border-left: 1px solid #ddd;
}
.header-menu__item > a {
position: relative;
padding: 0 20px;
}
.header-menu__item .en {
font-size: 12px;
color: #bbb;
line-height: 1;
font-weight: 400;
}
.header-menu__item > a,
.header-menu__item > a > span,
.header-menu__item > span {
display: block;
}
.header-menu__item:last-child {
border-right: 1px solid #ddd;
}
.header-menu__list02 {
display: none;
}
.has-child:hover .header-menu__list02 {
display: block;
width: 100%;
position: absolute;
font-weight: 400;
top: 40px;
left: 0;
padding: 8px 0;
background-color: #fff;
z-index: 1000;
cursor: pointer;
border-radius: 5px;
}
.header-menu__list02 a {
display: block;
padding: 5px 0;
}
.has-child {
position: relative;
text-align: center;
cursor: pointer;
padding-left: 20px;
padding-right: 30px;
}
.has-child::after {
content: "";
display: inline-block;
position: absolute;
width: 7px;
height: 7px;
border-top: 2px solid #2c2c2c;
border-right: 2px solid #2c2c2c;
transition: all 0.3s;
top: 12px;
right: 10px;
transform: rotate(135deg) translateY(-50%);
}
@media screen and (min-width: 768px) {
.site-title a {
padding-left: 20px;
}
}
まとめ
ドロップダウンメニューを実装する理由
ドロップダウンメニューとは?
ドロップダウンメニューは、ウェブサイトのナビゲーション要素の一つで、ユーザーがメニュー項目にマウスを合わせるか、クリックすると、開かれるメニューのことです。