菜蟲學習筆記：麵包屑導覽列製作 (CSS偽元素運用)

發表於 | 更新於 | In | 0 comments |
文章字數 : 933 | 所需閱讀時間 ≈ 4 分鐘

前幾天被問到要怎麼製作CSS的箭頭導覽列，第一個閃過的念頭就是用拼接的
研究一下把它做出來，一起把製作過程紀錄下來吧～

css 偽元素 ─ 認識 ::before 與 ::after

::before、::after 大概是最常使用的偽元素，兩者都是以display:inline-block的屬性存在，::before 是在原本的元素「之前」加入內容，::after 則是在原本的元素「之後」加入內容，同時偽元素也會「繼承」原本元素的屬性，如果原本文字是黑色，偽元素的文字也會是黑色。

很特別的是如果沒有使用 content: ""; 的偽元素是不會出現在畫面上的，它可以產新的元素來使用，也能使用 attr 直接獲取內容元素的屬性值 ( attribute )

:first-child 與 :last-child 頭尾選擇器

這兩個選取器其實很好懂，就是選第一個子物件以及最後一個子物件。但在使用上要很注意，此處「第一個子物件」是父元素下的第一個。
舉例來說，下方選取的:first-child並不會變成藍色

1
2
3
4
5
6
7
<div class="box">
	<h1>耀西的手工世界</h1>
	<div class="y">Y</div>
	<p class="o">O</p>
	<p class="s">S</p>
	<p class="h">H</p>
</div>
1
2
3
.box .y:first-child {
	color: blue;	
}

發現了嗎？重點是在於順序。
我們修改一下選取的內容，這樣<h1>耀西的手工世界就會變成藍色的，就可以看到選取後的效果了。

1
2
3
.box :first-child {
	color: blue;	
}

利用偽元素製作箭頭導覽列

1.首先在html增加html和css程式碼，這邊主要以ul製作並加上初步的CSS
如圖：

1
2
3
4
5
<div id="crumbs">
    <ul>
    	<li><a href="#">Breadcrumb</a></li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#crumbs ul {
    list-style: none;  /* 將ul的style reset掉 */
}

#crumbs ul li a {
    display: block;
	float: left;
	height: 50px;
	background: #c34272;
	position: relative;  /* 加入相對定位，在後方加入箭頭時會以這個為父元素 */
	margin: 0 10px 0 0;  /* 決定與右邊元素間距，若要合併此處可改為0 */
	padding: 30px 40px 0 80px;
    text-align: center;
	font-size: 20px;
	text-decoration: none;
	color: #fff;
}

接著會把相對定位也加進去，這樣在定義後方絕對定位連接的箭頭時，會以這個為父元素來定位

2.再來，要在a裡面使用偽元素::after加入border

1
2
3
4
5
6
7
8
9
#crumbs ul li a:after {
    content: "";
    border-top: 40px solid red;
    border-bottom: 40px solid red;
    border-left: 40px solid blue;
    position: absolute; 
    right: -40px; 
    top: 0;
}

稍微調整一下顏色以及透明度：

1
2
3
4
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #c34272;
z-index: 1;

3.接下來要把尾巴收掉，方式和::after相似，但要使用的是::before

1
2
3
4
5
6
7
8
9
#crumbs ul li a:before {
	content: "";  
	border-top: 40px solid blue;
	border-bottom: 40px solid blue;
	border-left: 40px solid red;
    position: absolute;
    left: 0; 
    top: 0;
}

調整顏色以及透明度：

1
2
3
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #d4f2ff;

差不多就快要完成了，此時可以試著加入幾個看看：

4.若要將頭尾的箭頭調整成方形或圓角，會使用:first-child和:last-child

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#crumbs ul li:first-child a {
  border-top-left-radius: 10px; 
  border-bottom-left-radius: 10px;
}

#crumbs ul li:first-child a:before {
  display: none; 
}
				
#crumbs ul li:last-child a {
  padding-right: 80px;
  border-top-right-radius: 10px; 
  border-bottom-right-radius: 10px;
}

#crumbs ul li:last-child a:after {
  display: none; 
}

使用:first-child和:last-child來刪除導覽列的第一個和最後一個元素的三角形
再使用border-radius將圓角修成要的樣子以及做些微調就完成啦！