HTML CSS三角面包屑导航
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML CSS三角面包屑导航相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Testing CSS Triangle breadcrumbs for IE8</title>
<style>
.breadcrumb {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 5px 0 5px 50px;
background: #a00; /* fallback color */
background: rgb(140,21,21);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid rgb(140,21,21);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 5;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li.top a {
padding-left: 10px;
z-index: 5;
}
.breadcrumb li.level-2 a { background: rgb(166,25,25); z-index: 4; }
.breadcrumb li.level-2 a:after { border-left-color: rgb(166,25,25); z-index: 4; }
.breadcrumb li.level-3 a { background: rgb(191,29,29); z-index: 3; }
.breadcrumb li.level-3 a:after { border-left-color: rgb(191,29,29); z-index: 3; }
.breadcrumb li.level-4 a { background: rgb(217,33,33); z-index: 2; }
.breadcrumb li.level-4 a:after { border-left-color: rgb(217,33,33); z-index: 2; }
.breadcrumb li.level-5 a { background: rgb(242,37,37); z-index: 1; }
.breadcrumb li.level-5 a:after { border-left-color: rgb(242,37,37); z-index: 1; }
.breadcrumb li.current a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li.current a:after { border: 0; }
.breadcrumb li a:hover { background: rgb(89,13,13); }
.breadcrumb li a:hover:after { border-left-color: rgb(89,13,13) !important; }
</style>
</head>
<body>
<ol class="breadcrumb">
<li class="level-1 top"><a href="/">Home</a></li>
<li class="level-2"><a href="/vehicles/">Vehicles</a></li>
<li class="level-3"><a href="/vehicles/vans/">Vans</a></li>
<li class="level-4"><a href="/vehicles/vans/camper-vans/">Camper Vans</a></li>
<li class="level-5 current"><a href="/vehicles/vans/camper-vans/1989-vw-westfalia-wagon.html">1989 VW Westfalia Wagon</a></li>
</ol>
</body>
</html>
导航面包屑的灵感来源
【中文标题】导航面包屑的灵感来源【英文标题】：Sources of inspiration for navigation breadcrumbs
【发布时间】：2010-09-08 03:48:14
【问题描述】：
我正在寻找导航“面包屑”的灵感来源和/或设计模式。到目前为止，我已经找到了breadcrumb collection on Pattern Tap。有人知道其他来源吗？
【问题讨论】：
【参考方案1】：
来自 A List Apart 的文章 'Taming lists' 对面包屑的 CSS 样式提出了一些很好的建议（请查看标题“面包屑路径”）。
【讨论】：
经典文章，我记得第一次发表的时候。那是令人兴奋、激动人心的时刻。【参考方案2】：
Yahoo pattern library 也有关于面包屑的有用信息。
【讨论】：
【参考方案3】：
http://www.greepit.com/2009/02/06/breadcrumb-inspiration-for-designers/
【讨论】：
【参考方案4】：
我发现了一些面包屑的好/坏例子here。
另外，还有一篇关于 breadcrumb designs 的博文。
【讨论】：
【参考方案5】：
Diemen Repository of Interaction Design Patterns 上有一个很棒的面包屑页面
【讨论】：
【参考方案6】：
Smashing Magazine 也有不错的综述：
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
【讨论】：
【参考方案7】：
如果使用 Microsoft ASP.NET，则有一个内置控件：SiteMapPath。
【讨论】：
【参考方案8】：
Web & Patterns breadcrumbs category
“用于网页设计的鼓舞人心和创意的面包屑”
【讨论】：
以上是关于HTML CSS三角面包屑导航的主要内容，如果未能解决你的问题，请参考以下文章
带三角的面包屑导航栏
带三角的面包屑导航栏（方法二）
前端特效制作 | CSS3圆形风格面包屑导航
如何使用面包屑导航组件
CSS 面包屑导航
导航面包屑的灵感来源