Tạo nhanh Breadcrumbs với CSS
Breadcrumbs là một tập hợp các đường link phân cấp, giúp cho người dùng dễ nhận biết mình đang ở đâu và di chuyển thuận lợi từ trang này đến trang khác trong một website. Ví dụ như bạn đang ở trang xem thông tin chi tiết của một chiếc iPad Air Celllular 32G trong danh mục máy tính bản, thì bạn sẽ thấy breadcrumbs trên trang như sau:
Trang chủ >> Máy Tính Bảng >> iPad Air Celllular
Lợi ích của Breadcrumbs là:
- Giúp người dùng nhận biết vị trí và di chuyển tốt giữa các trang.
- Giúp Google đánh giá chính xác độ tin cậy, chất lượng (PageRank) và các mối quan hệ keyword của một trang web.
Để tạo các breadcrumbs đẹp hình mũi tên, theo cách thông thường trước giờ thì người ta thường dùng các hình png. Ngày nay với sự tiến bộ trong css3, ta có thể tự làm việc đó hoàn toàn bằng css.
Demo
Bây giờ chúng ta sẽ đi từng bước để tạo breadcrumbs giống trên.
Bước 1: Tạo tập hợp các link với thẻ ul và li, và tạo style như sau
HTML
<ul>
<li><a href=”#1″>One</a></li>
<li><a href=”#2″>Two</a></li>
<li><a href=”#3″>Three</a></li>
<li><a href=”#3″>Four</a></li>
<li><a href=”#2″>Two</a></li>
<li><a href=”#3″>Three</a></li>
<li><a href=”#3″>Four</a></li>
</ul>
CSS
ul{
font-family: Helvetica,Arial;
list-style: none;
padding: 0px;
text-align: center;
list-style: none;
padding: 0px;
text-align: center;
}
ul li{ display: inline-block; }
ul li a{
background: #B50776;
color: #ffffff;
display: block;
font-weight: bold;
text-align: center;
line-height: 50px;
height: 50px;
width: 150px;
text-decoration: none;
padding: 10px;
margin: 0 5px 0 0;
position: relative;
color: #ffffff;
display: block;
font-weight: bold;
text-align: center;
line-height: 50px;
height: 50px;
width: 150px;
text-decoration: none;
padding: 10px;
margin: 0 5px 0 0;
position: relative;
}
Bước 2: Tạo mũi tên trước
CSS
ul li a:after {
content: “”;
border-top: 35px solid green;
border-bottom: 35px solid green;
border-left: 35px solid red;
position: absolute;
right: -35px;
top: 0;
z-index: 1;
border-top: 35px solid green;
border-bottom: 35px solid green;
border-left: 35px solid red;
position: absolute;
right: -35px;
top: 0;
z-index: 1;
}
Bước 3: Tạo mũi tên sau
CSS
ul li a:before {
content: “”;
border-top: 35px solid yellow;
border-bottom: 35px solid yellow;
border-left: 35px solid blue;
position: absolute;
left: 0;
top: 0;
border-top: 35px solid yellow;
border-bottom: 35px solid yellow;
border-left: 35px solid blue;
position: absolute;
left: 0;
top: 0;
}
Bước 4: Hoàn chỉnh mũi tên trước
![Breadcrumbs - Hoàn chỉnh mũi tên trước](https://lh3.googleusercontent.com/-a5KJtdEt6ZM/U2G4I8NBE_I/AAAAAAAAAe8/KKOkmyDxkBM/w206-h68-no/breadcrumb_4.png")
CSS
ul li a:after {
content: “”;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 35px solid #B50776;
position: absolute;
right: -35px;
top: 0;
z-index: 1;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 35px solid #B50776;
position: absolute;
right: -35px;
top: 0;
z-index: 1;
}
Bước 5: Hoàn chỉnh mũi tên sau
CSS
ul li a:before {
content: “”;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 35px solid #fff;
position: absolute;
left: 0;
top: 0;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 35px solid #fff;
position: absolute;
left: 0;
top: 0;
}
Bước 6: Hoàn chỉnh breadcrumbs
CSS
ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
ul li:first-child a:before {
display: none;
}
ul li:last-child a {
padding-right: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
ul li:last-child a:after {
display: none;
}