第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. 
   
2. 
   
3. 
   

复制代码

HTML代码：

1. 
   
2. 
   
3.         
   
   
   •                
   • Home
   
   
   •                
   • Biocompare Home
   
   
   •                
   • Product Discovery
   
   
   •                
   • Life Science Products / Laboratory Supplies
   
   
   •                
   • Kits and Assays
   
   
   •                
   • Mutagenesis Kits
   
   
   •                
   • Mutation Generation System™
   
   
   •         
   
   

复制代码

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