建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:13收藏

简介


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