今回のお題はサンプル1のアコーディオンメニューだ。マウスポインタをメニュー項目に重ねると、サブメニューが広がる。また、サブメニュー項目は、マウスポインタの動きに応じてハイライトする。「アコーディオンメニュー」をネットで検索すると、jQueryを使った作例が多くリストされるだろう。だが、JavaScriptは使わず、CSS3だけでもアコーディオンメニューの基本的な動きはつくれる。
メニューのもとになる静的スタイル
まず、<body>
要素に書くコードの構成だ。アコーディオンメニューは、つぎのようにclass
属性が"menu"の<ul>
要素でリストとして組み立てる。メニュー項目をclass
属性"item"の<li>
要素として、サブメニューはその中にさらに<ul>
要素を入れ子にした。サブメニュー項目も<li>
要素で、メニュー項目も含め、テキストは子の<a>
要素に加えた。そして、アコーディオンメニューの<ul>
要素全体を、class
属性"container"の<div>
要素で包んだ。
メニューの項目のテキストやリンクを加えたのがつぎのコードだ。メニュー項目はふたつ、サプメニュー項目はそれぞれ3つとふたつにした。最後のclass
属性"item"の<li>
要素は、アコーディオンメニューの下端の縁にするので、メニュー項目ではない(中にid
属性"bottom"の<span>
要素を加えた)。
この<body>
要素の記述に対して、つぎのような<style>
要素を加える。今のところ、アコーディオンメニューは開いたまま動かず、マウスポインタを重ねた項目のハイライトといったアニメーションもない(図1)。なお、CSSにベンダープレフィックスを付けなくて済むように、<script>
要素で-prefix-freeを読み込んだ(第1回の「ベンダープレフィックスと-prefix-free」の項参照)。
メニューに角の丸みと影を加える
アコーディオンメニューを動かす前に、もう少し飾りつけよう。アコーディオンメニュー(class
属性"menu")の<ul>
要素の4つ角は丸めて、ドロップシャドウを加える(図2)。プロパティborder-radius
に角丸の半径、box-shadow
には影の水平・垂直のずれとぼけ幅および色をつぎのように定めた(第1回の「ボタンの角に丸みを加える」および「影でボタンを立体的に見せる」の項を参照)。
さらに、アコーディオンメニューの背景色は線形のグラデーションにする。この場合にカラーを定めるのが、linear-gradient()
関数だ。引数には、つぎのようにグラデーションの向きと、始まりおよび終わりの色を与える。
アコーディオンメニュー(class
属性"menu")の<ul>
要素のbackground
プロパティは、つぎのように色をlinear-gradient()
関数に書き替えて、背景色は上から下へのグレーのグラデーションにした(図3)。
メニューの開け閉じの動きを加える
いよいよ、アコーディオンメニューに開け閉じの動きを加えよう。縦に伸び縮みさせるので、つぎのようにサブメニュー項目の<a>
要素に対してheight
プロパティを用いる。初めはつぶしておき(0)、メニュー項目(class
属性"item")にマウスポインタが重なったら(:hover
擬似クラス)高さを戻せばよい。そして、transition
プロパティで、アコーディオンの名前通りの滑らかなアニメーションとした(第1回の「ボタンに滑らかなアニメーションを定める」の項参照)。
transition
プロパティに「タイミング関数」(timing-function
)を定めると、アニメーションの動き方が変えられる。簡単に使うには、予め備わっている7つのキーワードから選べばよい。デフォルト値は、始めは加速して終わりに減速するease
だ(図4左)。MDN「timing-function」の「一般的なタイミング関数のキーワード」の項に7つのキーワードとそのグラフが掲げられているので、興味があれば試してみるとよいだろう。このお題ではease
よりもう少しめりはりの効いたease-in-out
を加える(図4右)。
※この図はMozilla Contributorsによるもので、CC-BY-SA 2.5のもとで利用が許諾されています。
メニュー項目の間に区切り線を入れる
アコーディオンメニューを閉じたとき、項目の間の区切りがわからないのは少し気になる(図5)。そこで、メニュー項目(class
属性"item")にborder-top
プロパティで、以下のコードのように区切り線を入れることにしよう。
確かめてみると、メニュー項目の間だけでなく、アコーディオンメニュー上端にも線が入ってしまう(図6)。この線は余計だ。そこで以下のコードのように、プルダウンメニュー(class
属性"menu")の項目(class
属性"item")のうち最初の<li>
要素を:first-child
擬似クラスで指定して、その線は消す(none
)こととした。これで、アコーディオンメニューの項目の間にだけ区切り線が入った(図7)。
サブメニュー項目にポインタを重ねたときハイライトさせる
仕上げに、サブメニュー項目にマウスポインタを重ねたとき、背景色を変えてハイライトさせよう。サブメニュー項目の<a>
要素の:hover
擬似クラスで、つぎのようにbackground
プロパティのカラーを定めた。また、サブメニュー項目の文字色は濃いグレーにしてあったので、そのカラーも黒に変えている。これで、マウスポインタを重ねたサブメニュー項目がハイライトする(図8)。これで、アコーディオンメニューのアニメーションはでき上がった。CSSの定めは以下のコード1にまとめたとおりだ。