Kim Nguyễn Wordpress, theme, plugin, hosting, domain, phần mềm, miễn phí, thủ thuật, internet, software, download, free, viễn thông, điện tử
Xem thêm bài viết Breadcrumb là gì?
Trong bài viết này mình sẽ hướng dẫn các bạn tạo một Breadcrumb Navigation đơn giản bằng các hiệu ứng CSS3.
Làm gì thì làm, xem demo cho nó hấp dẫn trước cái đã :D
Mình sẽ hướng dẫn các bạn 2 phần, một phần sử dụng hình ảnh background và một phần không.
Đầu tiên là tạo Code HTML với nội dung:
|
1 2 3 4 5 6 7 8 9 |
<!-- with images --> <div id="breadcrumb"> <ul class="crumbs"> <li class="first"><a href="#" style="z-index:9;"><span></span>Blog Home</a></li> <li><a href="#" style="z-index:8;">Archives</a></li> <li><a href="#" style="z-index:7;">2011 Writing</a></li> <li><a href="#" style="z-index:6;">Tips for jQuery Development in HTML5</a></li> </ul> </div> |
Ở trên mình dùng một lớp DIV với ID là breadcrumb.
Tiếp theo là Code CSS với nội dung:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.crumbs { display: block; } .crumbs li { display: inline; } .crumbs li.first { padding-left: 8px; } .crumbs li a, .crumbs li a:link, .crumbs li a:visited { color: #666; display: block; float: left; font-size: 12px; margin-left: -13px; padding: 7px 17px 11px 25px; position: relative; text-decoration: none; } .crumbs li a { background-image: url('bg-crumbs.png'); background-repeat: no-repeat; background-position: 100% 0; position: relative; } .crumbs li a:hover { color: #333; background-position: 100% -48px; cursor: pointer; } .crumbs li a:active { color: #333; background-position: 100% -96px; } .crumbs li.first a span { height: 29px; width: 3px; border-left: 1px solid #d9d9d9; position: absolute; top: 0px; left: 0px; } |
Ở hàng thứ 17, mình sử dụng thẻ background với img là bg-crumbs.png để làm hình nền dấu mũi tên.
Vậy là chúng ta đã hoàn thiện một breadcrumb rồi đó. Rất đơn giản phải không nào.
Tuy nhiên nếu chúng ta không sử dụng background thì sao. Nhưng đối với CSS3 thì không cần phải sử dụng ảnh nền mà chúng ta có thể dùng các hiệu ứng của CSS3 luôn.
Sử dụng Code HTML với nội dung như sau:
|
1 2 3 4 5 6 7 8 9 |
<!-- graceful degrade --> <div id="breadcrumb2"> <ul class="crumbs2"> <li class="first"><a href="#">Blog Home</a></li> <li><a href="#">Archives</a></li> <li><a href="#">2011 Writing</a></li> <li class="last"><a href="#">Tips for jQuery Development in HTML5</a></li> </ul> </div> |
Trong ví dụ này mình dùng DIV với ID là breadcrumb2 để tránh trùng với ví dụ trên.
Tiếp theo là Code CSS gồm cả 2 phần bên dưới.
Phần này là tạo bố cục cơ bản
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.crumbs2 { display: block; margin-left: 27px; padding: 0; padding-top: 10px; } .crumbs2 li { display: inline; } .crumbs2 li a, .crumbs2 li a:link, .crumbs2 li a:visited { color: #666; display: block; float: left; font-size: 12px; padding: 7px 16px 7px 19px; position: relative; text-decoration: none; border: 1px solid #d9d9d9; border-right-width: 0px; } .crumbs2 li a { background-image: -webkit-gradient(linear,left bottombottom,left top,color-stop(0.45, rgb(241,241,241)),color-stop(0.73, rgb(245,245,245))); background-image: -moz-linear-gradient( center bottombottom, rgb(241,241,241) 45%, rgb(245,245,245) 73%); /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)"; } .crumbs2 li.first a { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; } .crumbs2 li.last a { border-right-width: 1px; border-bottom-rightright-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-rightright-radius: 5px; } |
Phần này là tạo hiệu hứng Borders và Shadows sử dụng CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.crumbs2 li a:hover { border-top-color: #c4c4c4; border-bottom-color: #c4c4c4; background-image: -webkit-gradient(linear,left bottombottom,left top,color-stop(0.45, rgb(241,241,241)),color-stop(0.73, rgb(248,248,248))); background-image: -moz-linear-gradient( center bottombottom, rgb(241,241,241) 45%, rgb(248,248,248) 73%); /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)"; color: #333; -moz-box-shadow: 0px 2px 2px #e8e8e8; -webkit-box-shadow: 0px 2px 2px #e8e8e8; box-shadow: 0px 2px 2px #e8e8e8; } .crumbs2 li a:active { border-top-color: #c4c4c4; border-bottom-color: #c4c4c4; background-image: -webkit-gradient(linear,left bottombottom,left top,color-stop(0.45, rgb(224,224,224)),color-stop(0.73, rgb(235,235,235))); background-image: -moz-linear-gradient( center bottombottom, rgb(224,224,224) 45%, rgb(235,235,235) 73%); /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; color: #333; } |
(2 votes, average: 9.00 out of 10)
Loading...
