jquery版タブメニュー
jqueryを使った、タブメニューです。
スタイルシートと、jqueryで処理を記述しています。
このタブメニューは、IE8, IE7, IE6, Firefox3, Safari4, Opera10, Sleipnir2で動作することを確認済みです。
jquery版タブメニューのサンプル
タブメニューのHTMLソース
上記のタブメニューを利用するには、下記のようにヘッダを記述します。
| HTMLヘッダの記述 |
<link rel="stylesheet" type="text/css" href="tabmenu_jquery.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabmenu_jquery.js"></script>
|
タブメニューは、下記の例のようにHTMLを記述します。
ulタグに、tabmenuクラスを指定するだけで、利用できます。
カレントタブには、actクラスを指定する必要があります。
タブメニューは、可変長の文字列にも、対応しています。
スタイルシートやJavaScriptの著作権は放棄していませんが、そのまま利用したり、カスタマイズして利用することは、自由に行って頂いて構いません。
| HTMLの記述 |
<!-- ↓タブメニュー↓ -->
<ul class="tabmenu">
<li class="act"><a href="#">TOP</a></li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
<!-- ↑タブメニュー↑ -->
<!-- ↓タブ内容↓ -->
<div class="tabbody">
</div>
<!-- ↑タブ内容↑ -->
|
カスタマイズ方法
JavaScriptでプログラムしていますので、あまり、カスタマイズには向きませんが、カスタマイズ時の自由度は高いです。
基本的なデザインはスタイルシートで決定し、IE6が対応していない、aタグ以外のhover処理のみ、jqueryのhover関数を利用して記述しています。
処理のほとんどは、jqueryに依存していますので、ソースは短いです。
マウスオーバー時と、マウスアウト時に、自分と子要素に対して、スタイルを変更しているだけです。
jqueryは、スタイルシートの記述に似ているため、プログラムをコピーして作成すれば、プログラムの知識がない人でも、理解できると思います。
いろいろなタブメニューの実装方式
全く同じタブメニューですが、いろいろな実装方式で作成することができます。
