這是我最終處理出我想要的東西。
(以下皆為個人心情&處理過程)
這一切,感覺自已像「瞎子摸象」一樣!
摸看看什麼是「Bootstrap」??要如何做到「Sidebar Menu」??如何隱藏之類的......
最有有達到自已所要的結果了。
相關資源Summary:
========================
Simple Sidebar: (找到如何寫Sidebar的呈現方式~且可以縮合)
http://startbootstrap.com/template-overviews/simple-sidebar/
小圖Icon區:
http://getbootstrap.com/components/
有用到的是:
class="glyphicon glyphicon-align-justify" (三條線的圖)
class="glyphicon glyphicon-chevron-right" (向右指標圖)
class="glyphicon glyphicon-chevron-down"(向下指標圖)
縮合的Script邏輯,不用每個都定IDhttp://www.bootply.com/k30Hz23kGv
========================
在套上這一個玩意後,它的重點在Menu的縮合
而當營幕縮小時,它的Menu會自已不見 (所以要有的按鍵可以再把它給按開)
加上這個Script就可以把它給叫出來:
再來就是想它縮合的呈現。
程式的部份是:
讓它的主從關係,讓它可以縮合
再來小圖的部份,就充份的了解「toggleClass」的好處!! (雙向變換) http://api.jquery.com/toggleClass/
所以,就直接針對這個span,做圖型的切換。
而這樣,就達到我要的效果了!!
這是最終的程式碼:
(以下皆為個人心情&處理過程)
這一切,感覺自已像「瞎子摸象」一樣!
摸看看什麼是「Bootstrap」??要如何做到「Sidebar Menu」??如何隱藏之類的......
最有有達到自已所要的結果了。
相關資源Summary:
========================
Simple Sidebar: (找到如何寫Sidebar的呈現方式~且可以縮合)
http://startbootstrap.com/template-overviews/simple-sidebar/
小圖Icon區:
http://getbootstrap.com/components/
有用到的是:
class="glyphicon glyphicon-align-justify" (三條線的圖)
class="glyphicon glyphicon-chevron-right" (向右指標圖)
class="glyphicon glyphicon-chevron-down"(向下指標圖)
縮合的Script邏輯,不用每個都定IDhttp://www.bootply.com/k30Hz23kGv
========================
在套上這一個玩意後,它的重點在Menu的縮合
而當營幕縮小時,它的Menu會自已不見 (所以要有的按鍵可以再把它給按開)
加上這個Script就可以把它給叫出來:
$("#menu-toggle").click(function (e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); });
再來就是想它縮合的呈現。
程式的部份是:
讓它的主從關係,讓它可以縮合
再來小圖的部份,就充份的了解「toggleClass」的好處!! (雙向變換) http://api.jquery.com/toggleClass/
所以,就直接針對這個span,做圖型的切換。
而這樣,就達到我要的效果了!!
這是最終的程式碼:
0 意見 :
張貼留言