CSS3ドライグッズ25：疑似ラベルを使用してパンくずナビゲーションを実現

BreadcrumbNavigationのコンセプトは、おとぎ話「ヘンゼルとグレーテル」に由来します。ヘンゼルとグレーテルが森を通り抜けたとき、誤って道に迷いましたが、途中で散らばっていることに気づきました。パンくず、これらのパン粉をまかせてください。彼らが家に帰る道を見つけるのを手伝ってください。したがって、ブレッドクラムの機能は、訪問者に現在サイトのどこにいて、どのように戻るかを伝えることです。

--Baidu百科事典「パンくずナビゲーション」エントリ 

疑似タグに関しては、CSS3で疑似要素:: beforeと:: afterの従来の使用法を確認できます。 

一般的なパンくずナビゲーション

1.HTML構造

主にulとliを使用して全体的な構造を作成します。

最初のいくつかのアイテムにはハイパーリンクがあり、最後のアイテムはハイパーリンクではないため、クリックする必要がないため、spanタグを使用します。

セグメンテーションシンボル `>`は、li :: afterの疑似タグを使用して実行します。ただし、最初のアイテムliと最後のアイテムliの疑似ラベルの内容は空です。

<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スタイル

具体的なCSSコードは次のとおりです。

*{
    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:"";
}

特殊な形状のパンくずナビゲーション

疑似ラベル:: beforeとafterは、主に各パーツの頭と尾の形状を作成するために使用されます。

それらを作成するための鍵は、幅と高さを0に設定してから、境界線を追加することです。このときのフレームは、実際には4つの三角形です（下の図を参照）。

ボーダーカラーは透明です。どの境界線が必要かについては、どの境界線の色を指定された色として設定するだけです。

この写真は実際には上下の境界線の左側にあります。

キーを知ったら、コードを見てください。

1.HTML構造

<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スタイル

*{
    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;
}

終了しました〜！

このページで言及されている10個の純粋なcssブレッドクラムはすべてこれを行います。

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