- 2008年9月10日 10:33
- しらべる
ドロップダウンを生成してくれるソリューションにもいろいろな方法があるようで、大半はスクリプトを伴うものが多いようです。
ここではCSSだけを生成するオンラインのドロップダウンメニューのジェネレーターをメモします。
Suckerfish Multi-level menu CSS generator
http://pixopoint.com/suckerfish_css/
手順は以下の通り
- 画面上部のバーがプレビュー（デフォルトは赤いバー）
- 最初のボックスでテンプレートを決めて
- メイン階層とサブ階層のメニューのスタイルを決定する
- 最初のボックスの「Submit Design」ボタンをクリック
- 一番下のボックスにCSSが出力される
対応するHTMLの構造は以下のような感じでリストをネストします。
<ul id="suckerfishnav">
<li><a href="http://pixopoint.com/blog/" title="Blog">Blog</a>
<ul>
<li><a href="http://pixopoint.com/suckerfish-wordpress-plugin/" title="WordPress Dropdown Menu Plugin">Dropdown Plugin</a></li>
<li><a href="http://pixopoint.com/aqua-vaccinium-wordpress-theme/" title="Aqua Vaccinium WordPress theme">Aqua Vaccinium</a></li>
</ul>
</li>
<li class="current_page_ancestor"><a href="">Stuff</a>
<ul>
<li class="current_page_ancestor"><a href="">Another Level</a>
<ul>
<li class="current_page_ancestor"><a href="">Next Level</a>
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</li>
</ul>
</li>
</ul>
idはリストの最上位で指定するだけでOKです。
生成されたCSSにちょっと手を加えるだけでそれなりの見た目になるので、アニメーションや凝った仕様が必要ないのであれば、これで十分使えるのではないでしょうか？
ドロップダウンを調べていて、SuckerFishという言葉をよく見かけましたが、コバンザメという意味だそうです。メニューがコバンザメのようにぴったりくっついて表示されるところから来ているんですね。英語だとこういう例えも様になりますね。日本語だとコバンザメニュー。。
