1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 免JS!純CSS就可打造出,開合式的漢堡選單功能

免JS!純CSS就可打造出,開合式的漢堡選單功能

2022/11/16

梅問題-免JS!純CSS就可打造網頁常用的開合式選單
  選單一直是製作網頁最基本的功能需求之一,因此對於許多的套件內建都會提供選單的功能,且這些滑動式選單,大部分都是透過Javascript所製作而成,最主要的原因就在於,透過Javascript可以精準的知道,目前使用是點選開啟還是關閉。

而最近梅干發現一個超酷的寫法,直接透過html中的核許框,就可判斷目前是開啟還是關閉,再搭配CSS就可實作出展開與收合,甚至連漢堡選單的那圖示,也可透過CSS繪製出來,且當選單開啟時,還可透過動畫將選單變叉叉的圖示,因此現在就一塊來看看,如何透過純CSS打造出開合式漢堡選單吧!


Step1
首先,先在HTML中加入以下的HTML架構。
梅問題-免JS!純CSS就可打造網頁常用的開合式選單
Step2
接著再透過CSS來設定漢堡選單的圖示。
梅問題-免JS!純CSS就可打造網頁常用的開合式選單
Step3
接著再透過:checked的屬性,來判斷目前為開啟狀態,當選單開啟時,原來的三條線就變成叉叉。
梅問題-免JS!純CSS就可打造網頁常用的開合式選單
Step4
當選單按鈕處理好後,一樣用:checked來設定選單展開(200px)與收合(60px)。 
梅問題-免JS!純CSS就可打造網頁常用的開合式選單
Step5
都弄好後,再把input的核許框給隱藏起來,這樣就可透過純CSS打造出滑動式的漢堡選單啦!
梅問題-免JS!純CSS就可打造網頁常用的開合式選單
#範例預覽