skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

パンクズを綺麗に見せるJavaScript「jBreadCrumb」

｜ ｜ ｜ ｜ ｜ ｜ ｜

パンクズを設置することでユーザーがどこを見ているのかをわかりやすくできます。
おおかた地味な存在ですが、jQueryプラグインjBreadCrumbを使うと一味違う見せ方が可能です。

使用方法
jBreadCrumbからファイル一式をダウンロードします。
<link rel="stylesheet" href="BreadCrumb.css" type="text/css">
<script src="jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.jBreadCrumb.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#id名").jBreadCrumb();
})
</script>

上記を記述したら、あとはパンクズを書くのみです。
<div id="id名" class="breadCrumb module">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">第1階層</a></li>
<li><a href="#">第2階層</a></li>
<li><a href="#">第3階層第3階層第3階層第3階層</a></li>
<li>該当記事名テキスト</li>
</ul>
</div>

パンクズを綺麗に見せるJavaScript「jBreadCrumb」サンプル

記事作成：2009年02月18日

前の記事：画像ギャラリーにマスクをかけるJavaScript「(mb)MaskedGallery」
次の記事：フォームのユーザビリティを再考してコンバージョンを向上