さまざまな色のメニューを簡単に作成!「jQuery CSS Menu Style 06」

メニューはサイトを構成する重要な要素の一つです。
そんなメニューを手軽にかつさまざまな色で作成できるjQuery CSS Menu Style 06 を紹介します。
※非商用のみ選択色をダウンロード可能。バックリンク付き。

sponsors

使用方法

jQuery CSS Menu Style 06 から好きな色を選択の上、ダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="menu.js"></script>
<link href="menu.css" type="text/css" rel="stylesheet" />
あとはメニューを書けば完成です。

<div id="menu">
    <ul class="menu">
        <!-- 親カテゴリ -->
        <li><a href="#" class="parent"><span>Home</span></a>
            <!-- 子カテゴリ -->
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <!-- 孫カテゴリ -->
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <!-- ひ孫カテゴリ -->
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
            </ul></div>
        </li>
    </ul>
</div>
※子カテゴリをもつliタグにはclass="parent"を付与下さい。
変なバックリンクが出て嫌だという人は、購入かベースにされている下記JavaScriptをご検討ください。
LavaLamp for jQuery lovers! | Ganesh

サンプル


Javascriptサンプルページ一覧
skuare.net