描述：jBreadCrumb 是一个可折叠的的路径式导航栏可用于处理嵌套很深的，冗长命名页面。根据面包屑菜单的长度可以单 隐藏中间的部分菜单 ，鼠标放上后显示半隐藏的菜单。事先已经在CSS中准备了多种类型的设计，只用设置相关的选项，即可完成漂亮的面包屑菜单 。
图片展示：
兼容浏览器：IE6+/Firefox/Google Chrome
官方链接： http://www.comparenetworks.com/d ... ns/jbreadcrumb.htm
JS下载： http://www.ijquery.cn/js/jquery.jBreadCrumb.1.1.js
注：需要事先引用jquery.easing.1.3.js插件，下载地址：http://www.ijquery.cn/js/jquery.easing.1.3.js
预览： http://www.ijquery.cn/study/demo/jBreadCrumb
打包下载：http://www.ijquery.cn/study/demo/jBreadCrumb/jBreadCrumb.zip
参数说明：
easing:'swing' //多种效果可以在easing中查看！
JS引用代码：
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.jBreadCrumb.1.1.js"></script>
<script type="text/javascript">
$(function(){
jQuery("#breadCrumb").jBreadCrumb();
});
</script>
[/js]
HTML代码：
[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-->
[/html]
CSS代码：
[css]<link rel="stylesheet" href="css/BreadCrumb.css" type="text/css">[/css]
即：
[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;
}
[/css]