伸縮自如的導航欄

演示請查看RunJS：

http://sandbox.runjs.cn/show/us82aiml

須要完成的功能點包括：

• 不一樣頁面，tab數是不固定的，因此每一個tab的寬度須要自適應，好比2個時各佔1/2，3個時1/3，四個時1/4，默認是1/3。tab數超出4個時，會折行顯示。這個是經過「元素範圍選擇器」來實現的，即綜合利用nth-child、nth-last-child、first-child、last-child來組合實現。
• tab之間，可能有分界線。若是經過margin實現，很容易致使不合理的折行，所以利用border模擬分隔符的效果。此時須要設置盒模型爲border-box，而且不支持徹底透明效果。
• 屏幕向下滾動足夠距離時，自動吸附到頂部（固定定位）。經過fixed樣式實現。
• 固定定位狀態下，導航欄能夠「變身」爲另外一種形式，也能夠不變。經過fixed+multi組合樣式實現。
• 變身模式下，支持摺疊和展開效果。經過fixed+fold組合實現。
• 變身模式下，展開層的tab列表和本來的tab列表是一一對應的，只是樣式不一樣。經過初始化時複製一份拷貝，外加獨立multi樣式重定義實現。
• 切換tab時，須要保持兩個列表狀態同步更新。經過相似於jQuery.index()方法檢索當前tab的順序。

須要達成的目標是：

• DOM結構儘量簡單明晰。
• 展開、摺疊、變形都經過CSS定義，JS僅僅須要在合適的時機添加或刪除一個class。
• 經過細粒度的樣式定義，方便各個頁面自定義視覺效果。

最後，不得不說，css3的僞類，太強大了！

參考連接：

• http://www.w3cplus.com/css3/using-css-mod-queries-with-range-selectors.html
• http://alistapart.com/article/quantity-queries-for-css