今回は「CSSのみで実装する横並びのプルダウンメニュー」を作ってみたいと思います。横並びのメニュー親のliの中にマウスホバーで子のliを表示します。特別な動きをつけずに簡単に作るものと、transitionをつかってプルダウンに動きをつけたものを作ってみたいと思います。下にデモも用意していますので、どんなものかご覧ください。

CONTENTS

• 1.基本的なHTML
• 2.CSSでメニューのデザインを整える
• 3.positionで表示位置を調整
• 4.displayプロパティでホバー時に表示
• 5.transitionでプルダウンに動きをつける
• 6.transition解説

1.基本的なHTML

基本的なHTMLは簡単です。ulのリストの中にサブメニューとなるulを入れ子にしました。ここでいうとMenuのliが親でsubMenuが子ですね。

2.CSSでメニューのデザインを整える

CSSでデザインを簡単に整えておきます。ここは自分の好きなように設定されてください。一応今回使用したCSSをのせておきます。（全体通してCSSが大雑把なのはお許しください。）親背景のメニューを薄いグレーにして右側にborder:1px、そして一番右端のborderはli:last-childで消しています。子メニューは親要素のスタイルが継承されているので、不要なスタイルを上書きします。子メニューの背景は濃いグレーで同様に下にborderをつけ、同じく一番下はli:last-childで消しています。

3.positionで表示位置を調整

メニューの下にくる要素でサブメニューが隠れてしまわないようにさきほどのメニューにpositionとz-indexを指定します。親となるli要素（.Menu li）にposition:relativeを指定してpositionの親要素とします。.Menu li aにはposition:relativeとz-indexを使用します。

次に子要素subMenuにposition:absoluteを指定します。さきほどrelativeで親要素を指定しているので、subMenuはMenuを親となります。absoluteは絶対位置なので指定した親要素が基準になります。なにも指定がない場合はhtmlを基準とします。今の状態だと親要素にsubMenuがかぶってしまうので、absoluteのtopで親メニュー分の高さを調整してください。そして、メニュー後続の要素の下にこの子メニューがもぐりこんで見えなくならないようにz-indexも指定しておきます。後々のtransitionで動きをつける場合に子メニューが親メニューの下からでてるようにしたいので、子メニューの値を親メニューより小さくしてください。

4.displayプロパティでホバー時に表示

subMenuは通常は見えずにマウスホバーした状態で表示するようにしたいので、普段はdisplay:noneで非表示にしておいて、マウスホバー時に表示するようにします。

そしてホバー時に表示するコードを追加します。

DEMO

ここまでの流れでプルダウンメニューは実装できました。とくに動きをつける必要がないのであれば、ここまでできれば充分だと思います。次はこのメニューに動きをつけてみたいと思います。

5.transitionでプルダウンに動きをつける

まず、さきほど作ったdisplay:noneとblockで表示と非表示を切り替えていましたが、このdisplayプロパティはtransitionでは使えません。なので子メニューでopacityを使い、隠します。そして、ホバー時に表示させるようにしようと思います。さきほどのMenu li ul.subMenuで追加したdisplay:none;とMenu li:hover ul.subMenuのdisplay:blockは削除してください。

DEMO

これでマウスホバーした時にサブメニューがゆっくりと表示するような動きになったのではないでしょうか？linearは一定の速度でease-inは最初はゆっくりでだんだん早くなります。

inherit（継承）

ひとつポイントですが、subMenu（通常時）のwidthとheightに0を指定して、ホバー時にinheritを指定していますが、これはopacityで透過にしてしまうと、子メニューの要素は透過になっているだけで実際には親メニューの下に要素は存在します。ということは見えない子メニューに反応してしまって親メニューのボタンをホバーせず、実際に存在する子メニューをホバーするとプルダウンが開いてしまいます。通常時はwidthとheightを0にしておくことでそれを防ぐことができます。ホバー時のinheritは通常継承しない親要素のプロパティでも強制的に継承することができます。よって一度0にした高さと幅を継承し、ホバー時に表示させます。

6.transition解説

transitionは要素が変化していくプロパティです。ここでは簡単に解説しておきますが、transitionにはtransition-property（どう変化させるかの設定。今回の場合だとopacityとtop(position）、transition-duration（変化にかかる時間、単位はs(秒）ms（ミリ秒））、transition-timing-function（変化する具合の調整）、transition-delay（変化が始まるタイミングs、ms指定）これらの動きをまとめてtransitionでまとめて指定することができます。今回の例だとopacityがtransition-property、400msはtransition-duration、linearがtransition-timing-functionになります。transition-delayは使用しておりません。今回の例で個人的にちょっとわかりずらかった部分transition-propertyを解説すると、下記のように最初に指定しているtransition-propertyはどういう変化をつけるかを指定します。opacity以外にもbackground（背景）の変更やボーダー（border）だったり、幅（width）だったり、なんでもいいので変化させたいプロパティを記述します。そして次の動きで変化後の値を入力します。

動きの参考やプロパティは「フラップイズムさん」のブログが参考になりました。以上になります。まだ試したことない方はホームページも様になるので、一度試してみてください。

参考書籍：CSS3デザインブック 仕事で絶対に使うプロのテクニック

 

追記2018.2.5

この記事の改訂版として新たに「CSSのみで多階層のプルダウンメニューを作る【改訂版】」を書きました。この記事の内容にプラス多階層のメニューをつけたものです。