Một thanh breadcrumb (không biết gọi là gì trong tiếng Việt) sẽ chứa các link phân cấp cho phép người dùng dễ dàng định vị được vị trí hiện tại hoặc chuyển hướng nhanh đến trang higher-level. Ngoài ra, breadcrumb cũng giúp người dùng đỡ công sức hơn khi phải bấm back nhiều lần.
Một cách đơn giản nhất, nếu trang web của bạn có nhiều trang với nhiều sub-levels thì để tăng tính hữu dụng, bạn sẽ phải cần dùng đến breadcrumbs.
Như đã nói, trong bài viết này sẽ đưa ra một số CSS breadcrumb navigation bằng CSS pseudo.
The HTML
Markup đơn giản như này thôi, sử dụng một unordered list
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>breadcrumbs-one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Vivamus nisi eros<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nulla sed lorem risus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nam iaculis commodo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>current<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Current crumb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> |
The CSS
Trước hết reset style của thẻ ul trước đã.
1 2 3 4 5 6 | <span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Sau đó chúng ta sẽ tạo ra các breadcrumbs bằng CSS pseudo-elements.
First example
Với ví dụ đầu tiên này, kỹ thuật sử dụng tương tự như làm 1 CSS3 tooltips thôi. Về cơ bản, tạo ra một hình tam giác có border ở góc bên phải bằng cách tạo ra 2 hình tam giác, hình màu đậm hơn sẽ cần lớn hơn 1 tí và dịch sang trái 1 tí để tạo ra border.
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <span class="token selector">#breadcrumbs-one </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #f5f5f5 #e5e5e5 #ccc<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token selector">li </span><span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>:first-child </span><span class="token punctuation">{</span> <span class="token selector">a </span><span class="token punctuation">{</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px 0 0 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">a </span><span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> .7em 1em .7em 2em<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>.5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> #f5f5f5<span class="token punctuation">,</span> #ddd<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>:after, <span class="token parent important">&</span>:before </span><span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> -1.5em<span class="token punctuation">;</span> <span class="token property">border-top</span><span class="token punctuation">:</span> 1.5em solid transparent<span class="token punctuation">;</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1.5em solid transparent<span class="token punctuation">;</span> <span class="token property">border-left</span><span class="token punctuation">:</span> 1em solid<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> -1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>:after </span><span class="token punctuation">{</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">border-left-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>:before </span><span class="token punctuation">{</span> <span class="token property">border-left-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> -1.1em<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>:hover </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>:after </span><span class="token punctuation">{</span> <span class="token property">border-left-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.current </span><span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>:after, <span class="token parent important">&</span>:before </span><span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>:hover </span><span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Second example
Ví dụ này cũng dễ hiểu đúng không, cũng ghép 3 hình trên lại với nhau, CSS như sau
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <span class="token selector">#breadcrumbs-two </span><span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token selector">li </span><span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 .5em 0 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> .7em 1em<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span> <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> .5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>:before </span><span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> -1.5em<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 1.5em 0 1.5em 1em<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #ddd #ddd #ddd transparent<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> -1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>:after </span><span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> -1.5em<span class="token punctuation">;</span> <span class="token property">border-top</span><span class="token punctuation">:</span> 1.5em solid transparent<span class="token punctuation">;</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1.5em solid transparent<span class="token punctuation">;</span> <span class="token property">border-left</span><span class="token punctuation">:</span> 1em solid #ddd<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> -1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>:hover </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #99db76<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>:before </span><span class="token punctuation">{</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #99db76 #99db76 #99db76 transparent<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>:after </span><span class="token punctuation">{</span> <span class="token property">border-left-color</span><span class="token punctuation">:</span> #99db76<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.current, .current:hover </span><span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.current </span><span class="token punctuation">{</span> <span class="token selector"><span class="token parent important">&</span>:after, <span class="token parent important">&</span>:before </span><span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Third example
Ở ví dụ này chỉ cần dùng thêm chút border-radius chúng ta sẽ tạo ra được 1 hình chữ nhật bo góc và một hình vuông bo góc đã bị xoay 45 độ để có thể dựng thành hình giống… “cây bút chì”.
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 43 44 45 46 47 48 49 50 51 52 53 54 | <span class="token selector">#breadcrumbs-three</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token selector">; li</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 2em 0 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> .7em 1em .7em 2em<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> .5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> .4em 0 0 .4em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">&:after</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 2.5em<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> -1.25em<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> -1em<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 2.5em<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> .4em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">&:hover</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #abe0ef<span class="token selector">; &:after</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #abe0ef<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.current, .current:hover</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.current::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Fourth example
Lần này là nối 3 hình chữ nhật lại với nhau, kết hợp 1 tí border-radius nhẹ ở các góc của pseudo-elements, sau đó dùng transform skew để có được hình như mong muốn. Đơn giản nhưng trông khá cool nhỉ.
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <span class="token selector">#breadcrumbs-four</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four li</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 .5em 0 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four a</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> .7em 1em<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span> <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> .5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four a:hover</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #efc9ab<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four a::before, #breadcrumbs-four a::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skew</span><span class="token punctuation">(</span>-10deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four a::before</span> <span class="token punctuation">{</span> <span class="token property">left</span><span class="token punctuation">:</span> -.5em<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px 0 0 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four a:hover::before</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #efc9ab<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four a::after</span> <span class="token punctuation">{</span> <span class="token property">right</span><span class="token punctuation">:</span> -.5em<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 0 5px 5px 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four a:hover::after</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #efc9ab<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four .current, #breadcrumbs-four .current:hover</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#breadcrumbs-four .current::after, #breadcrumbs-four .current::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Lợi thế của breadcrumbs bằng CSS
- Không dùng images, rất dễ để sửa và bảo trì.
- Mọi thứ đều scalable, kích thước đều dùng
emcả. - Support ngon trên các browser cũ luôn.
Lời kết
Style ở phía trên lặp lại code khá nhiều nhưng mình không merge chung lại với nhau. Có thể bạn sẽ cần đến một thiết kế cụ thể trong đó, như vậy chỉ cần copy phần CSS thì mọi thứ đã có thể hoạt động (đừng quên sửa id ở HTML).
Bonus thêm cho bạn quả design này, thực ra nó là của form steps chứ ko phải breadcrumbs, nhưng shape cũng tương tự, có cả quả hình zoom to cho bạn thử CSS (nhớ đừng bỏ qua border và border-radius nhé)
Comment kết quả của bạn vào phần bình luận phía bên dưới nhé.
Thank you for reading and I hope you liked this tutorial!