網頁設計, 網頁資源

Bootstrap教學-Bootstrap內建Accordion Menu手風琴選單使用教學

梅干 2017/07/03
梅問題-Bootstrap教學-Bootstrap內建就有Accordion Menu手風琴式選單
  Bootstrap是一套相當好用的RWD Framework,除了擁有強大的網格系統外,再來就是內建這多網頁常會用到的特效,像是下拉選單、頁籤、廣告輪播....等,且使用上相當的簡易,完全無需寫到任何的Javascript碼,只要依照Bootstrap所設計的HTML標籤,立即就可產生出各式各樣酷炫的網頁特效,這對於完全不會javascript的朋友,也能輕鬆的套用。
  而今天要來分享一個,也是大家在製作網頁時,常會用到的一個特效,那就是手風琴選單,這個特效相信許多朋友,或多或少都有在網路上,下載相關的jQuery套件,但在套用時,總是套的一個頭二個大,不是CSS發生衝突,就是javascript支援度的問題,因此現在透過Bootstrap內建的手風琴選單特效,不但完全不用寫到任何javascript,甚至使用上更加簡易,至於怎麼使用,現在也一塊來看看吧!
Step1
首先,在建立這個手風琴選單時,需先建一個id,而之後的手風琴選單,的data-parent要與id相同,因此當要有多個手風琴選單時,每個panel-group的id名稱需不同才可以喔!
梅問題-Bootstrap教學-Bootstrap內建就有Accordion Menu手風琴式選單
Step2
接著一個手風琴選單的組成,會分別二個區塊,一個是選單按鈕,一個是點選展開的內容。
梅問題-Bootstrap教學-Bootstrap內建就有Accordion Menu手風琴式選單
Step3
而每一組的手風琴選項的選單id也不可重覆,甚至起始值的部分,只需在panel-collapse後方加in,一開始這個手風琴選單就會展開。
梅問題-Bootstrap教學-Bootstrap內建就有Accordion Menu手風琴式選單
Step4
而其它的,需在手風琴選項的後方加入class="collasped"
梅問題-Bootstrap教學-Bootstrap內建就有Accordion Menu手風琴式選單
Step5
當設定好後,預設值會依剛所指定的in開啟,並且點到選單時,會將上一個關閉,並展開所點選的,是不是超EZ呀!因此使用Bootstrap的朋友,千萬可別錯過了。
梅問題-Bootstrap教學-Bootstrap內建就有Accordion Menu手風琴式選單
[範例預覽]