第2回 アコーディオンメニューのアニメーション | gihyo.jp今回のお題はサンプル1のアコーディオンメニューだ。マウスポインタをメニュー項目に重ねると、サブメニューが広がる。また、サブメニュー項目は、マウスポインタの動きに応じてハイライトする。「アコーディオンメニュー」をネットで検索すると、jQueryを使った作例が多くリストされるだろう。だが、JavaScriptは使わず、CSS3だけでもアコーディオンメニューの基本的な動きはつくれる。 サンプル1 CSS3：Accordion menu by rollover メニューのもとになる静的スタイル まず、<body>要素に書くコードの構成だ。アコーディオンメニューは、つぎのようにclass属性が"menu"の<ul>要素でリストとして組み立てる。メニュー項目をclass属性"item"の<li>要素として、サブメニューはその中にさらに<ul>要素を入れ子にした。サブメニュー項目も<li>要素で、メニ
