CSS, CSS3, 網頁設計

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

2016/12/30
梅問題-利用CSS3偽類選擇器:checked,實作出Toggle隱藏開啟的功能
  當點網頁中的選項時,點一下會開啟選單,再點一下則將選單關閉,而這一開一合,有經驗的網頁設計師一定都知道,此效果需透過jQuery的Toggle事件來完成,但現在不用這麼麻煩啦!直接透過CSS3的偽類選擇器:checked,就可實現如同jQuery的Toggle事件,完全不用寫任何的程式喔!
  而這個:checked的功能,是CSS3所新增的偽類選擇器,最主要的功能,就是用來判斷當前的核許框,是呈現勾選還是取消,再分別設定它的樣式效果,如此一來就可實現像Toggle般的開合效果啦!至於怎麼做,現在也一塊來看看吧!
Step1
首先,輸入下方的html碼,且在lable標籤中的for裡面的名稱要與input標籤中的id名稱一致。
<label for="toggle">選單</label>
<input type="checkbox" id="toggle" checked> 
<div class="toggle-box">
顯示的內容區塊
</div>

Step2
接著就會看到,在頁面中分別有一個核許框,與要顯示的內容區塊。
梅問題-利用CSS3偽類選擇器:checked,實作出Toggle隱藏開啟的功能
Step3
接著再輸入css的style樣式設定。
label {
	display:block;
}
/*滑鼠滑到label文字時,滑鼠游標變成手型圖示*/
label:hover{
	cursor: pointer;
}
/*當核許框為勾選時,隱藏.toogle-box區塊*/
input[type=checkbox]:checked + div {
	opacity:0;
	max-height:0;
}
.toggle-box {
	display: inline-block;
	padding: 10px;
	opacity:1;
	overflow:hidden;
	transition:opacity 1.0s linear;
}

Step4
這時當點label的選單文字時,就可看到核許框的狀態,並顯示或隱藏toggle-box的區塊內容。
梅問題-利用CSS3偽類選擇器:checked,實作出Toggle隱藏開啟的功能
Step5
接著再css中,再加入下方的style樣式,將input的核許框給隱藏起來。
input{
	display: none;
}

Step5
核許框就不見了,這時當點選lable的選單文字時,就會展開與關閉啦!因此透過此方法,就可作出開合的下拉選單。
梅問題-利用CSS3偽類選擇器:checked,實作出Toggle隱藏開啟的功能
[範例預覽]