2013/02/16
[UI] UI Components : Breadcrumb
サイト内での位置をハイパーリンクとして表示するパンくずリスト。パンくずは順序づけしているので、ol要素でマークアップすることが推奨されているみたい。
DEMO
a
b
c
d
HTML
CSS
/* -------------------- breadcrumb -------------------- */
/* 共通 */
.breadcrumb li {
display: inline-block;
text-transform: capitalize;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
.breadcrumb li:last-child a {
color:#555 !important;
cursor:default;
text-decoration:none;
}
/* A */
.breadcrumb li + li:before {
content: "\003e";
padding:0 .5em 0 .3em;
color: #999;
}
.breadcrumb li a {
color: #117EC6;
}
/* B */
.breadcrumb li + li:before {
content: "\002F";
padding:0 .5em 0 .3em;
color: #999;
}
.breadcrumb li a {
color: #117EC6;
}
/* C */
.breadcrumb {
font-size:0;
overflow:hidden;
}
.breadcrumb li a {
display:inline-block;
position: relative;
padding:.3em .5em .3em 2em;
border:1px solid #ccc;
background: #fff;
font-size:14px;
color: #117EC6;
}
.breadcrumb li:first-child a {
padding-left: 1em;
border-radius: 3px 0 0 3px;
}
.breadcrumb li:last-child a {
padding-right: 1em;
border-radius: 0 3px 3px 0;
}
.breadcrumb li + li {
margin-left: -1px;
}
.breadcrumb li a:after, .breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
position: absolute;
left: 100%;
top: 50%;
}
.breadcrumb li a:after {
border:1.1em solid transparent;
border-left:1.1em solid #fff;
margin-top: -1.1em;
z-index: 2;
}
.breadcrumb li a:before {
border:1.1em solid transparent;
border-left:1.1em solid #ccc;
margin-top: -1.1em;
margin-left:1px;
z-index: 1;
}
.breadcrumb li:last-child a:before, .breadcrumb li:last-child a:after {
content: normal;
}
/* D */
.breadcrumb {
font-size:0;
overflow:hidden;
}
.breadcrumb li a {
display:inline-block;
position: relative;
padding:.3em 0 .3em 2.5em;
background: #eee;
font-size:14px;
color: #117EC6;
}
.breadcrumb li:first-child a {
padding-left: 1em;
}
.breadcrumb li:last-child a {
padding-right: 1em;
}
.breadcrumb li + li {
margin-left: -1px;
}
.breadcrumb li a:after, .breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
position: absolute;
left: 100%;
top: 50%;
}
.breadcrumb li a:after {
border:1.5em solid transparent;
border-left:1.5em solid #eee;
margin-top: -1.45em;
z-index: 2;
}
.breadcrumb li a:before {
border:1.5em solid transparent;
border-left:1.5em solid #fff;
margin-top: -1.45em;
margin-left:4px;
z-index: 1;
}
.breadcrumb li:last-child a:before, .breadcrumb li:last-child a:after {
content: normal;
}
0 件のコメント :
コメントを投稿