Tạo breadcrumb với border tam giác cho WordPress

Nếu bạn muốn thanh breadcrumb navigation trên blog WordPress có hình dạng border là hướng mũi tên qua phía bên phải thì bạn có thể áp dụng các thủ thuật css sau để thực hiện điều này.

Tạo breadcrumb với border hình mũi tên

Giả sử bây giờ bạn có một thanh breadcrumb navigation với định dạng HTML như sau, code này là Sáu đang dùng plugin WordPress SEO by Yoast để tạo ra.

<p id="breadcrumbs">
	<span xmlns:v="http://rdf.data-vocabulary.org/#">
		<span typeof="v:Breadcrumb">
			<a property="v:title" rel="v:url" href="http://localhost/prefile">Home</a>
		</span>
		<span typeof="v:Breadcrumb">
			<a property="v:title" rel="v:url" href="http://localhost/prefile/category/uncategorized/">Uncategorized</a>
		</span>
		<span typeof="v:Breadcrumb">
			<span property="v:title" class="breadcrumb_last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span>
		</span>
	</span>
</p>

Bây giờ bạn có thể dùng các định dạng CSS bên dưới để làm đẹp cho thanh breadcrumb trên blog WordPress.

#breadcrumbs {
    background-color: #F1F1EC;
    border: 1px solid #D6D6D6;
    border-radius: 6px;
}

#breadcrumbs .breadcrumb_last, #breadcrumbs span a {
	position: relative;
}

#breadcrumbs .breadcrumb_last:after, #breadcrumbs span a:after {
	border:18px solid transparent;
	border-right:1px none black;
	border-left-width:12px;
	border-left-color:#F1F1EC;
	content: "";
	display:block;
	position:absolute;
	right: -18px;
	top: -9px;
	z-index:51;
	white-space:nowrap;
	overflow:hidden;
	text-indent:9999px;
	width:0px;
	height:0px
}

#breadcrumbs .breadcrumb_last:before, #breadcrumbs span a:before {
	border:18px solid transparent;
	border-right:1px none black;
	border-left-width:12px;
	border-left-color:#bebebe;
	content: "";
	display:block;
	position:absolute;
	right: -19px;
	top:-9px;
	z-index:50;
	width:0px;
	height:0px
}

#breadcrumbs > span > span {
    display: inline-block;
    height: 34px;
    line-height: 32px;
    padding: 0 10px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	cursor: pointer;
}

#breadcrumbs > span > span:hover {
	background-color: #F9F9F4;
}

#breadcrumbs > span > span:hover span.breadcrumb_last:after, #breadcrumbs > span > span:hover a:after {
	border-left-color: #F9F9F4;
}

#breadcrumbs > span > span {
    margin-left: -8px;
    padding-left: 25px;
}

#breadcrumbs > span > span:first-child {
	margin-left: 0;
}

#breadcrumbs span a:hover {
	text-decoration: none;
}

Nếu như bạn đã làm mọi thứ đều đúng với hướng dẫn thì kết quả bạn sẽ thấy được một thanh breadcrumb giống như hình ảnh minh họa Sáu gửi bên dưới.

Tạo breadcrumb navigation có hình mũi tên

Rất đơn giản và dễ làm phải không nào, cái này rất phù hợp cho các trang web muốn thiết kế giao diện theo kiểu phẳng, mang phong cách hiện đại. Chúc bạn thành công.

Gửi bình luận của bạn

Gửi bình luận

Địa chỉ email của bạn sẽ được giữ bí mật. Những mục bắt buộc được đánh dấu *