第26款插件:jBreadCrumb 设计优化的面包屑菜单插件

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

图片展示：



兼容浏览器：IE6+/Firefox/Google
Chrome

官方链接： http://www.comparenetworks.com/d ... ns/jbreadcrumb.htm

l

JS下载： http://ijquery.360sites.cn/js/jquery.jBreadCrumb.1.1.js

注：需要事先引用jquery.easing.1.3.js插件，下载地址：http://ijquery.360sites.cn/js/jquery.easing.1.3.js

预览： http://ijquery.360sites.cn/demo/jBreadCrumb

打包下载：http://ijquery.360sites.cn/demo/jBreadCrumb/jBreadCrumb.zip

参数说明：

easing:'swing' //多种效果可以在easing中查看！

复制代码
JS引用代码：

<script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery.jBreadCrumb.1.1.js"></script>

<script type="text/javascript">

$(function(){

jQuery("#breadCrumb").jBreadCrumb();

});

</script>

复制代码
HTML代码：

<!--菜单 start-->

<div id="breadCrumb" class="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代码：

<link rel="stylesheet" href="css/BreadCrumb.css" type="text/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;

}

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=26