最新消息:

第23款插件:jquery.jBreadCrumb.js设计优化的面包屑菜单插件

菜单插件 杨红伟 2569浏览 0评论

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

图片展示:

11

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接: http://www.comparenetworks.com/d … ns/jbreadcrumb.htm
JS下载: http://www.ijquery.cn/js/jquery.jBreadCrumb.1.1.js
注:需要事先引用jquery.easing.1.3.js插件,下载地址:http://www.ijquery.cn/js/jquery.easing.1.3.js
预览: http://www.ijquery.cn/demo/jBreadCrumb
打包下载:http://www.ijquery.cn/demo/jBreadCrumb/jBreadCrumb.zip
参数说明:

easing:’swing’  //多种效果可以在easing中查看!

JS引用代码:

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.jBreadCrumb.1.1.js"></script>
<script type="text/javascript">
$(function(){
jQuery("#breadCrumb").jBreadCrumb();
});
</script>

[/js]

HTML代码:

[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–>

[/html]

CSS代码:

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

即:

[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;
}

[/css]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址