简介

BreadCrumb 是一个可折叠的的路径式导航栏可用于处理嵌套很深的，冗长命名页面。根据面包屑菜单的长度可以单 隐藏中间的部分菜单 ，鼠标放上后显示半隐藏的菜单。事先已经在CSS中准备了多种类型的设计，只用设置相关的选项，即可完成漂亮的面包屑菜单 。 

（下载的附件中附有DEMO）

使用

1.  引入 jquery.js 、 jquery.easing.1.3.js 和 jquery.jBreadCrumb.1.1.js 文件

注：需要事先引用jquery.easing.1.3.js插件  

2.  HTML

<!--菜单 start-->
<div id="breadCrumb">
<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™</li>
</ul>
</div>
<!--菜单 end-->

CSS
/* Float Clearing
---------------------------------------------------------------------*/

.module:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

/* Breadcrumb Styles
---------------------------------------------------------------------*/

.breadCrumb
{
margin: 0;
padding: 0;
float: left;
display: block;
height: 21px;
overflow: hidden;
width: 490px;
padding:5px;
border:solid 1px #dedede;
background:#fff;
}
.breadCrumb ul
{
margin: 0;
padding: 0;
height: 21px;
display: block;
}
.breadCrumb ul li
{
display: block;
float: left;
position: relative;
height: 21px;
overflow: hidden;
line-height: 21px;
margin: 0px 6px 0px 0;
padding: 0px 10px 0px 0;
font-size: .9167em;
background: url(../Images/Chevron.gif) no-repeat 100% 0;
}
.breadCrumb ul li div.chevronOverlay
{
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.breadCrumb ul li span
{
display: block;
overflow: hidden;
}
.breadCrumb ul li a
{
display: block;
position: relative;
height: 21px;
line-height: 21px;
overflow: hidden;
float: left;
}
.breadCrumb ul li.first a
{
height: 16px !important;
text-indent:-1000em;
width:16px;
padding: 0;
margin-top: 2px;
overflow: hidden;
background:url(../Images/IconHome.gif) no-repeat 0 0;
}
.breadCrumb ul li.first a:hover
{
background-position: 0 -16px;
}
.breadCrumb ul li.last
{
background: none;
margin-right: 0;
padding-right: 0;
}
.chevronOverlay
{
display: none;
background: url(../Images/ChevronOverlay.png) no-repeat 100% 0;
width: 13px;
height: 20px;
}

3.  调用

<script type="text/javascript">
$(function(){
jQuery("#breadCrumb").jBreadCrumb();
});
</script>

相关链接

GitHub 地址 ：https://github.com/mrjasonroy/jBreadCrumb