JavaScriptを使わず、CSS3で作るクールな多段メニュー

WebDesignerWallにおいてCSS3を利用した、MacOSのような多段メニュー(Mac-like multi-level dropdown menu)を作成する方法が公開された(マイコミジャーナルのニュース記事 - CSS3で綺麗なドロップダウンメニューを作る方法)。CSS3の新機能であるborder-radiusやbox-shadow, text-shadowを活用し、JavaScriptを使わずにクールな多段メニューを実現している。

CSS3 Dropdown Menu - CSS Codeより引用

CSS3 Dropdown MenuはFirefoxとSafari、そしてChromeで完璧にレンダリングされる。Internet Explorer 7以降のようなCSS3に対応していないWebブラウザでも動作するが、その場合は角丸や影が失われる。

CSS3 Dropdown Menu - Previewより引用。CSS3に対応していないWebブラウザで表示した場合は右画像のように、角丸や影がレンダリングされない

本稿では公開されているサンプルをベースに、多段メニューの作成方法とCSS3の記述がそれぞれどのように影響しているのかを紹介しよう。