【ハウツー】

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

1 CSS3 Dropdown Menuとは

    富田宏昭  [2010/03/24]

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

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン