マウスを乗せると、隠れていたコンテンツがするーっと現れる「ドロップダウンメニュー」を実装してみましょう。
サイトのデザインがすっきりするので、覚えておいて損はありません！
ナビゲーションメニューとかで使われるやつですね！
そうです！デザイン性だけではなく、過剰な情報をうまく隠すことで
ユーザーの視認性もアップするんですよ。
hoverで現れるメニュー(ドロップダウンメニュー)を実装
簡単なナビゲーションメニューを例に説明していきます。
See the Pen accordion:hover by spica (@spica_blog) on CodePen.
コンテンツにマウスが乗ると、サブメニューがスライドダウン(徐々に表示)してきます。
コンテンツからマウスが外れると、サブメニューがスライドアップ(徐々に非表示)します。
HTMLを記述する
「ul class=”nav”」の中に3つのナビゲーションメニュー「li class=”nav-menu”」があり、それぞれにサブメニュー「ul > li」があります。
ナビゲーションメニューは表示される部分で、サブメニューは非表示にしたい部分です。
<ul class="nav">
<!-- ナビゲーションメニューFood -->
<li class="nav-menu">
<a href="">Food</a>
<!-- サブメニューFood -->
<ul class="menu-list">
<li class="menu-item"><a href="">Menu1</a></li>
<li class="menu-item"><a href="">Menu2</a></li>
<li class="menu-item"><a href="">Menu3</a></li>
<li class="menu-item"><a href="">Menu4</a></li>
</ul>
</li>
<!-- ナビゲーションメニューDrink -->
<li class="nav-menu">
<a href="">Drink</a>
<!-- サブメニューDrink -->
<ul class="menu-list">
<li class="menu-item"><a href="">Menu1</a></li>
<li class="menu-item"><a href="">Menu2</a></li>
<li class="menu-item"><a href="">Menu3</a></li>
<li class="menu-item"><a href="">Menu4</a></li>
</ul>
</li>
<!-- ナビゲーションメニューSweets -->
<li class="nav-menu">
<a href="">Sweets</a>
<!-- サブメニューSweets -->
<ul class="menu-list">
<li class="menu-item"><a href="">Menu1</a></li>
<li class="menu-item"><a href="">Menu2</a></li>
<li class="menu-item"><a href="">Menu3</a></li>
<li class="menu-item"><a href="">Menu4</a></li>
</ul>
</li>
</ul>
CSSを記述する
/* base */
ul, a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.nav {
display: flex;
}
.nav > li {
position: relative;
width: 200px;
background-color: red;
font-weight: bold;
border-right: 1px solid #fff;
}
.nav > li:last-child {
border-right: none;
}
.nav a {
display: block;
line-height: 1;
padding: 0.75em 0;
font-size: 16px;
text-align: center;
color: #fff;
}
.menu-list {
display: none;
position: absolute;
left: 0;
top: 2.5em;
width: 100%;
}
.menu-list > li > a {
font-size: 16px;
font-weight: bold;
line-height: 1.75;
color: #333;
background-color: rgba(255,209,179,0.5);
}
.menu-list > li > a:hover {
background-color: rgba(255,209,179,1);
}
細かく解説をしていきます。
ナビゲーションメニュー
flexboxを使って、メニューを横並びにします。
「display: flex;」だけであっという間にメニューが横に並びます。
.nav {
display: flex;
}「li」のデザインを決めます。
「position: relative;」は、サブメニューの位置を決めるための親要素です。
「border-right」でリストの境目に線を引きます。右端のliには線がいらないので、「li:last-child{border-right: none;}」とします。
.nav > li {
position: relative;
width: 200px;
background-color: red;
font-weight: bold;
border-right: 1px solid #fff;
}
.nav > li:last-child {
border-right: none;
}aタグに「display: block;」と指定することで、クリックできる範囲をブロック全体に広げます。
aタグはインライン要素です。そのままだとクリックできる範囲が文字の部分だけになっているので、クリック範囲を親要素いっぱいに広げるために「display: block;」を指定します。
ブロックの最小の高さを「line-height: 1;」とすると、指定したフォントの値の高さが確保できます。単位は付けません。
.nav a {
display: block;
line-height: 1;
padding: 0.75em 0;
font-size: 16px;
text-align: center;
color: #fff;
}サブメニュー
サブメニューの位置を決めるため、「position: absolute;」「left: 0;」「top: 2.5em;」を指定します。
親要素の位置が基準なので、「top: 2.5em」の内訳は、「.nav a」で指定したpadding: 0.75em（上下で1.5em）と、1文字分の1emです。
「width: 100%;」は親要素の幅と同じになります。
.menu-list {
position: absolute;
left: 0;
top: 2.5em;
width: 100%;
}サブメニューの「li」のデザインを決めます。ここではa要素に指定しました。
背景色の不透明度を指定する
「background-color: rgba(255, 209, 179, 0.5);」と指定すると、背景色にのみ不透明度を指定できます。
あれ？不透明度ってopacityじゃなかったっけ？
opacityとrgbaでは、不透明にする対象が異なります。
違いはこちらで確認してみてください。
See the Pen rgba/opacity by spica (@spica_blog) on CodePen.
なるほど、opacityは要素全体に作用しちゃうんですね！
.menu-list > li > a {
font-size: 16px;
font-weight: bold;
line-height: 1.75;
color: #333;
background-color: rgba(255,209,179,0.5);
}「background-color: rgba(255, 209, 179, 1);」で、ホバーした時に不透明になります。
.menu-list > li > a:hover {
background-color: rgba(255,209,179,1);
}CSSの指定が終わったら、「.menu-list」に「display: none;」を追加して、非表示にしておきます。
jQueryを記述する
jQueryはとても短いです！
$(function() {
$('.nav-menu').hover(function() {
$(this).children('.menu-list').stop().slideToggle();
});
});
え？！これだけ？！
びっくりするほど短いですよね！
ドロップダウンメニューのコード
実行予約$(function(){})
｛｝の中にjQueryのコードを書いていきます。
$(function() {
// jQueryを記述
});【イベント】hover()
ナビゲーションメニューをホバーした時に実行するので、セレクタは「’.nav-menu’」となります。
「$(‘.nav-menu’).hover(function(){})」の{}の中に処理を書いていきます。
$('.nav-menu').hover(function() {
// 処理を書く
});サブメニューがスライドする
「ナビゲーションメニューにマウスが乗ったとき、サブメニューがスライドダウンする」
と、
「ナビゲーションメニューからマウスがはずれたとき、サブメニューがスライドアップする」。
この2つの処理を、1つのメソッドで実現できます。
それが「slideToggle()」です！
このメソッドだけで、「slideUp」と「slideDown」を交互にやってくれるんです。有能！
$(this).children('.menu-list').stop().slideToggle();セレクタが、「$(this).children(‘.menu-list’)」になっているところがポイントです。
単純に「$(‘.menu-list’)」と指定したくなりますが、そうすると、ホバーした時に他の「nav-menu」のサブメニュー「menu-list」まで全部開いてしまいます。
「$(this).children」と付けることで、「今マウスが乗っているメニューのサブメニュー」だけが開くようになります。
アニメーションを制御する
「stop()」はアニメーションの動きを止める役割があります。
これがないと、連続してマウスオーバーとマウスアウトを繰り返した時に、その回数だけ律義にスライドが実行されてしまうからです。
地味に活躍してくれるやつです。
「$(this).children(‘.menu-list’).stop().slideToggle();」の1行で、ホバーした時の処理ができました。
まとめ
多くのサイトで使われているドロップダウンメニュー。
アニメーションだと難しいと思われがちですが、jQueryですとわずか数行の記述で実装できてしまうんです！
jQueryを初めて使う人も、簡単に実装できますね！
別ページへのリンクだけではなく、ページ内リンクを設定すると
スクロールする手間が省けるのでおすすめです。
ぜひ試してみてくださいね！
コメント