[CSS]リスト要素をデザインするスタイルシートの実装集

noupeのエントリー「20+のリスト要素を装飾するスタイルシートのデモとチュートリアル」を紹介します。

CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices

Darren Hoyt Dot Com

上記キャプチャの「Recent Archives」のプルダウンのようになっている箇所は、下記のようにdl, ul 要素が使用されています。

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)" class="module">Recent Archives</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href='http://www.darrenhoyt.com/2008/06/' title='June 2008'>June 2008</a></li>
<li><a href='http://www.darrenhoyt.com/2008/05/' title='May 2008'>May 2008</a></li>
<li><a href='http://www.darrenhoyt.com/2008/04/' title='April 2008'>April 2008</a></li>
</ul>
</dd>
</dl>

noupeのエントリーでは、他にも多くの実装例が紹介されています。

Post on:2008年7月8日