javascript - html伸縮式側邊欄代碼？

類似於這種 http://www.htmleaf.com/Demo/20141010127.html 。
求簡單的寫個例子，可以用jquery。
或者給我一個思路也行。

        Document                     基本布局我已經寫好了，代碼編輯器竟然不支援 * 選取器！所以我寫了兩個 * 號！ 

順便問一下，用sublime的有嗎？捷徑寫出來的基本html文檔中，怎麼改成？

回複內容：

類似於這種 http://www.htmleaf.com/Demo/20141010127.html 。
求簡單的寫個例子，可以用jquery。
或者給我一個思路也行。

        Document                     基本布局我已經寫好了，代碼編輯器竟然不支援 * 選取器！所以我寫了兩個 * 號！ 

順便問一下，用sublime的有嗎？捷徑寫出來的基本html文檔中，怎麼改成？

給三個 class 分別對應隱藏，表徵圖模式，全部模式三個模式下的寬度，然後在對應的事件上綁定相應的 class 就好了。
標籤快捷補完是 emmet 的功能，只需要 html 的話可以直接輸入 html 然後 tab，如果是要修改語言的話需要 ![lang=zh-cn] 或者你也可以 !!! 和 doc 兩個配合使用，更多的捷徑可以查看 emmit cheatsheet 自己在 config 裡面定義一個快捷模板，這個可以查閱官方 readme 瞭解更多。

