![梅問題-免JS!純CSS就可打造網頁常用的開合式選單](http://photo.minwt.com/img/Content/webdesign/css-menu-opne-close/css-menu-open-close_00.jpg)
而最近梅干發現一個超酷的寫法,直接透過html中的核許框,就可判斷目前是開啟還是關閉,再搭配CSS就可實作出展開與收合,甚至連漢堡選單的那圖示,也可透過CSS繪製出來,且當選單開啟時,還可透過動畫將選單變叉叉的圖示,因此現在就一塊來看看,如何透過純CSS打造出開合式漢堡選單吧!
Step1
首先,先在HTML中加入以下的HTML架構。
![梅問題-免JS!純CSS就可打造網頁常用的開合式選單](http://photo.minwt.com/img/Content/webdesign/css-menu-opne-close/css-menu-open-close_01.jpg)
Step2
接著再透過CSS來設定漢堡選單的圖示。
![梅問題-免JS!純CSS就可打造網頁常用的開合式選單](http://photo.minwt.com/img/Content/webdesign/css-menu-opne-close/css-menu-open-close_02.jpg)
Step3
接著再透過:checked的屬性,來判斷目前為開啟狀態,當選單開啟時,原來的三條線就變成叉叉。
![梅問題-免JS!純CSS就可打造網頁常用的開合式選單](http://photo.minwt.com/img/Content/webdesign/css-menu-opne-close/css-menu-open-close_03.jpg)
Step4
當選單按鈕處理好後,一樣用:checked來設定選單展開(200px)與收合(60px)。
![梅問題-免JS!純CSS就可打造網頁常用的開合式選單](http://photo.minwt.com/img/Content/webdesign/css-menu-opne-close/css-menu-open-close_04.jpg)
Step5
都弄好後,再把input的核許框給隱藏起來,這樣就可透過純CSS打造出滑動式的漢堡選單啦!
![梅問題-免JS!純CSS就可打造網頁常用的開合式選單](http://photo.minwt.com/img/Content/webdesign/css-menu-opne-close/css-menu-open-close_05.jpg)
#範例預覽