优化面包屑菜单JQuery插件jquery.jBreadCrumb.js

简介

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