【ハウツー】

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) 実装のポイント


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

ハワイアン航空、羽田緊急着陸の経緯発表--機体はブレーキ交換を経て復帰
[19:16 7/26] 趣味
『テイルズ オブ ゼスティリア ザ クロス』、先行上映会のLV会場追加
[19:15 7/26] ホビー
昼休みにセキュリティ講座、カスペルスキーが働く女性向けに
[19:02 7/26] 企業IT
野菜ソムリエ100人が考えたトルティアチップスのレシピを公開 - 湖池屋
[19:02 7/26] ヘルスケア
メタビル「ガンダムアストレイ ブルーフレーム」特設サイト公開、深い青で高い質感
[19:00 7/26] ホビー

求人情報