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

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

使用方法
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

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

sponsors

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

記事作成:
記事URL:

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