【ハウツー】

JavaScriptいらず、CSS3で作るシンプル&クールな多段メニュー

1 CSS3 Dropdown Menuとは

  • <<
  • <

1/3

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の記述がそれぞれどのように影響しているのかを紹介しよう。

  • <<
  • <

1/3

インデックス

目次
(1) CSS3 Dropdown Menuとは
(2) サンプルの紹介
(3) 実装のポイント


人気記事

一覧

イチオシ記事

新着記事