[CSS]スクリプト無しで、リスト要素をプルダウンにするスタイルシート
Post on:2009年9月2日
sponsors
IE6などクロスブラウザ対応の、リスト要素をプルダウンにするスタイルシートのチュートリアルをPro Blog Designから紹介します。
How to Create a Beautiful Dropdown Blogroll Without JavaScript
demo
ドロップダウンは、見出し箇所（p要素）とドロップダウン箇所（ul要素）で実装されており、下記のようになっています。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="blogroll"> <p>Blogroll</p> <ul> <li><a href="http://www.site.com/">Example Site</a></li> <li><a href="http://www.site.com/">Example Site</a></li> <li><a href="http://www.site.com/">Example Site</a></li> <li><a href="http://www.site.com/">Example Site</a></li> </ul> </div> </textarea> |
シンプルなHTMLなので、CSSオフ時には見出しとリストがそのまま表示されます。
sponsors
