WEBサイトのリスト・メニュー。ドロップダウンなどのCSSデザイン

WEBサイトのナビゲーション用に、横にリンクが並んだメニューが一般的ですが、これを<ul>などのタグとCSSで構造的にやろうとすると、なかなか大変。CSSをまだまだ勉強中ということもありますが、Mac + FireFoxなどで確認しながらデザインを決めていて、Mac + IEで再確認すると、デザインが崩れて、なんじゃこりゃ〜っというような状況に。そんな時に見つけたのがこのサイト。

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers

The Zen of CSS Designのように、単純な<ul>リストを、CSSだけで色々なバリエーションにデザイン。

photo
photo
photo
photo
photo

かなり沢山のデザインがリストされているので、まずは色々なブラウザでチェックしつつ、自分の好きなデザインの参考にすることが可能。ステップ by ステップのチュートリアルもあります。

Listutorial: Tutorial 1 - Background images for bullets - Step 1 - Make a basic list

同時に、これからの標準もきっちりと押さえておきたいところ。