2013年1月20日 星期日

jQuery麵包屑導覽- jBreadCrumb

jbread

麵包屑(crumb)是許多網站在讓使用者知道目前是在哪一層,很常用的方法,這個是一個比較特別的麵包屑plugin,除了幫你寫好麵包屑的CSS外,另外他也縮短了麵包屑的長度,當把滑鼠移到該個層級時才會展開,詳細看了就知道了。

Plugin網址:
jBreadCrumb

首先html照他的排列方法

<div id="breadCrumb" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
<a href="#">Product Discovery</a>
</li>
<li>
<a href="#">Life Science Products / Laboratory Supplies</a>
</li>
<li>
<a href="#">Kits and Assays</a>
</li>
<li>
<a href="#">Mutagenesis Kits</a>
</li>
<li>
Mutation Generation System&trade;
</li>
</ul>
</div>
</div>


然後引入plugin,樣式也可以引入css後再作調整。

  1. $("#breadCrumb").jBreadCrumb();  

Demo

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...