【ハウツー】

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年後は? あなたの年収をデータに基づき予報します。

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

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

人気記事

一覧

イチオシ記事

新着記事

小柳歩、"舐め"オンパレードで「セクシーというよりはエロい」
[00:00 8/28] エンタメ
Fカップ松嶋えいみ、2人の男性からマッサージ「私生活でもやって欲しい」
[00:00 8/28] エンタメ
さんま『さんまのまんま』終了理由「制作費」と明かすも、 実は別に理由が?
[23:55 8/27] エンタメ
「PINコード」とは - いまさら聞けないスマートフォン用語
[23:04 8/27] スマホとデジタル家電
[鈴木保奈美]10年後も「元気で身軽な人でいたい」
[22:40 8/27] エンタメ

求人情報