伸缩自如的导航栏

演示请查看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