CSS3 Dry Goods 25: Use pseudo-labels to achieve breadcrumb navigation

The concept of BreadcrumbNavigation comes from the fairy tale "Hansel and Gretel". When Hansel and Gretel passed through the forest, they accidentally lost their way, but they found that they were scattered everywhere they went along the way. Bread crumbs, let these crumbs help them find their way home. Therefore, the function of breadcrumb navigation is to tell visitors where they are currently on the site and how to return.

--Baidu Encyclopedia "bread crumb navigation" entry 

Regarding pseudo tags, you can check  the classic usage of pseudo-elements ::before and ::after in CSS3

General breadcrumb navigation

1. HTML structure

Mainly use ul and li to make the overall structure.

The first few items have hyperlinks, and the last item is not a hyperlink, so use the span tag because it does not need to be clicked.

The segmentation symbol `>` uses the pseudo tag of li::after to do it. However, the pseudo-label content of the first item li and the last item li is empty.

<div class="box1">
    <ul class="bread">
        <li>当前位置：</li>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><span>关于我们详情</span></li>
    </ul>
</div>

2. CSS style

The specific CSS code is as follows:

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
.box1{
    height: 40px;
    background: #eee;
    width: 1000px;
    line-height: 40px;
    margin-left: auto;
    margin-right: auto;
}
.box1 .bread{
    padding-left: 20px;
}
.box1 .bread li{
    float: left;
}
.box1 .bread li a,
.box1 .bread li span{
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    color: #333;
}
.box1 .bread li a:hover{
    color: #f30;
}
.box1 .bread li::after{
    content: ">";
}
.box1 .bread li:last-child::after,
.box1 .bread li:first-child::after{
    content:"";
}

Special shaped breadcrumb navigation

The pseudo-labels ::before and after are mainly used to make the head and tail shape of each part:

The key to making them is : set the width and height to 0; then add a border. The frame at this time is actually 4 triangles (as shown in the figure below).

The border color is transparent. For which border is needed, just set which border color as the specified color.

This picture is actually the left part of the upper and lower borders.

After knowing the key, look at the code.

1. HTML structure

<div class="box">
    <ul class="breadNav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">关于我们详情</a></li>
    </ul>
</div>

2. CSS style

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
a{
    text-decoration: none;
}

.box{
    margin: 100px;
    height: 50px;  /* 整个面包屑导航高 50。这个数据很关键。*/
}
.breadNav li{
    float: left;
    margin-left: 35px; /* 每个 li 适当拉开距离  */
}
.breadNav li a{
    display: block;
    line-height: 50px;
    padding-left: 20px; /* 超链接内容间距拉开 */
    padding-right: 20px;
    background: #eee;
    position: relative; /* 相对定位 */
    color: #333;
    font-size: 16px;
}
.breadNav li a::after,
.breadNav li a::before{
    content: "";
    width: 0;
    height: 0;
    /* 伪标签边框宽 25px 为整个高度的一般，边框颜色透明 。*/
    border:25px transparent solid;
    position: absolute;  /* 绝对定位，方便把定位伪标签位置 */
}
.breadNav li a::after{
    border-left-color:#eee;  /* 尾部三角，只有左边框，就设置左边框颜色  */
    left:100%;
    top:0;
}
.breadNav li a::before{
    /* 头部形状，只有上下边框，就设置上下边框色  */
    border-top-color:#eee;
    border-bottom-color:#eee;
    left:-25px;  /* 上下边框宽度是 50px，值需要它们的一半露出来。  */
    top:0;
}
/* 鼠标移动到超链接上改变颜色  */
.breadNav li a:hover{
    background: #f30;
    color: #fff;
}
.breadNav li a:hover::before{
    border-top-color:#f30;
    border-bottom-color:#f30;
}
.breadNav li a:hover::after{
    border-left-color:#f30;
}

Finished~!

The 10 pure css breadcrumbs mentioned in this page all do this.

http://www.360doc.com/content/18/0125/10/33667232_724927599.shtml