2014/11/14

20141114-程式-Bootstrap的Sidebar Menu處理過程

這是我最終處理出我想要的東西。


(以下皆為個人心情&處理過程)
這一切,感覺自已像「瞎子摸象」一樣!

摸看看什麼是「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的縮合
Free Bootstrap 3 Themes and Templates


而當營幕縮小時,它的Menu會自已不見 (所以要有的按鍵可以再把它給按開)


加上這個Script就可以把它給叫出來:
$("#menu-toggle").click(function (e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });



再來就是想它縮合的呈現。
程式的部份是:


讓它的主從關係,讓它可以縮合


再來小圖的部份,就充份的了解「toggleClass」的好處!! (雙向變換)  http://api.jquery.com/toggleClass/

所以,就直接針對這個span,做圖型的切換。
而這樣,就達到我要的效果了!!


這是最終的程式碼:
 
        

        

 
    























0 意見 :

張貼留言