第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

参数说明：

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

复制代码

JS引用代码：

1. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
   
2. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery.easing.1.3.js"></script>
   
3. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery.jBreadCrumb.1.1.js"></script>
   
4. <script type="text/javascript">
   
5.         $(function(){
   
6.                 jQuery("#breadCrumb").jBreadCrumb();
   
7.         });
   
8. </script>

复制代码

HTML代码：

1. <!--菜单 start-->
   
2. <div id="breadCrumb" class="breadCrumb ">
   
3.         <ul>
   
4.                 <li><a href="#">Home</a></li>
   
5.                 <li><a href="#">Biocompare Home</a></li>
   
6.                 <li><a href="#">Product Discovery</a></li>
   
7.                 <li><a href="#">Life Science Products / Laboratory Supplies</a></li>
   
8.                 <li><a href="#">Kits and Assays</a></li>
   
9.                 <li><a href="#">Mutagenesis Kits</a></li>
   
10.                 <li>Mutation Generation System™</li>
    
11.         </ul>
    
12. </div>
    
13. <!--菜单 end-->

复制代码

CSS代码：

1. <link rel="stylesheet" href="css/BreadCrumb.css" type="text/css">

复制代码

即：

1. /* Float Clearing
   
2. ---------------------------------------------------------------------*/
   
3. 
   
4. .module:after
   
5. {
   
6.         clear: both;
   
7.         content: ".";
   
8.         display: block;
   
9.         height: 0;
   
10.         visibility: hidden;
    
11. }
    
12. 
    
13. 
    
14. /* Breadcrumb Styles
    
15. ---------------------------------------------------------------------*/
    
16. 
    
17. .breadCrumb
    
18. {
    
19.         margin: 0;
    
20.         padding: 0;
    
21.         float: left;
    
22.         display: block;
    
23.         height: 21px;
    
24.         overflow: hidden;
    
25.         width: 490px;
    
26.         padding:5px;
    
27.         border:solid 1px #dedede;
    
28.         background:#fff;
    
29. }
    
30. .breadCrumb ul
    
31. {
    
32.         margin: 0;
    
33.         padding: 0;
    
34.         height: 21px;
    
35.         display: block;
    
36. }
    
37. .breadCrumb ul li
    
38. {
    
39.         display: block;
    
40.         float: left;
    
41.         position: relative;
    
42.         height: 21px;
    
43.         overflow: hidden;
    
44.         line-height: 21px;
    
45.         margin: 0px 6px 0px 0;
    
46.         padding: 0px 10px 0px 0;
    
47.         font-size: .9167em;
    
48.         background: url(../Images/Chevron.gif) no-repeat 100% 0;
    
49. }
    
50. .breadCrumb ul li div.chevronOverlay
    
51. {
    
52.         position: absolute;
    
53.         right: 0;
    
54.         top: 0;
    
55.         z-index: 2;
    
56. }
    
57. .breadCrumb ul li span
    
58. {
    
59.         display: block;
    
60.         overflow: hidden;
    
61. }
    
62. .breadCrumb ul li a
    
63. {
    
64.         display: block;
    
65.         position: relative;
    
66.         height: 21px;
    
67.         line-height: 21px;
    
68.         overflow: hidden;
    
69.         float: left;
    
70. }
    
71. .breadCrumb ul li.first a
    
72. {
    
73.         height: 16px !important;
    
74.         text-indent:-1000em;
    
75.         width:16px;
    
76.         padding: 0;
    
77.         margin-top: 2px;
    
78.         overflow: hidden;
    
79.         background:url(../Images/IconHome.gif) no-repeat 0 0;
    
80. }
    
81. .breadCrumb ul li.first a:hover
    
82. {
    
83.         background-position: 0 -16px;
    
84. }
    
85. .breadCrumb ul li.last
    
86. {
    
87.         background: none;
    
88.         margin-right: 0;
    
89.         padding-right: 0;
    
90. }
    
91. .chevronOverlay
    
92. {
    
93.         display: none;
    
94.         background: url(../Images/ChevronOverlay.png) no-repeat 100% 0;
    
95.         width: 13px;
    
96.         height: 20px;
    
97. }
    

复制代码

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