Breadcrumb 麵包屑

在介面中的一種導航輔助，方便用戶檢索、理解網站架構。

麵包屑狀態

適用平台：官網PC、網銀PC

Enabled Hover
  • 文字顏色：#1C1C1C
  • 箭頭顏色：#1C1C1C 1px
  • hover顏色：#00a19b

麵包屑

SAMPLE

HTML

                                                                            
<div class="l-breadCrumb">
    <div class="container">
        <div class="row">
            <ul>
                <li>
                    <a href="/bank">首頁</a>
                </li>
                <li>
                    <a href="/bank/personal">個人服務</a>
                </li>
                <li>
                    <a href="/bank/personal/credit-card">信用卡/支付</a>
                </li>
            </ul>
        </div>
    </div>
</div>
複製

CSS

                                                                            
.l-breadCrumb ul {
margin: 0;
padding: 0;
}
.l-breadCrumb li {
display: inline-block;
}
.l-breadCrumb li:last-child::after {
display: none;
}
.l-breadCrumb li::after {
content: url(../img/ui/breadCrumb.svg);
width: 8px;
display: inline-block;
margin: 0px 5px;
}
.l-breadCrumb li a {
color: #1c1c1c;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.l-breadCrumb li a:hover {
color: #00a19b;
}
複製