伸缩自如的导航栏

淺唱寂寞╮ 提交于 2019-12-24 16:18:36

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

演示请查看RunJS:

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

需要完成的功能点包括:

  • 不同页面,tab数是不固定的,所以每个tab的宽度需要自适应,比如2个时各占1/2,3个时1/3,四个时1/4,默认是1/3。tab数超出4个时,会折行显示。这个是通过“元素范围选择器”来实现的,即综合利用nth-childnth-last-childfirst-childlast-child来组合实现。
  • tab之间,可能有分界线。如果通过margin实现,很容易导致不合理的折行,因此利用border模拟分隔符的效果。此时需要设置盒模型为border-box,并且不支持完全透明效果。
  • 屏幕向下滚动足够距离时,自动吸附到顶部(固定定位)。通过fixed样式实现。
  • 固定定位状态下,导航栏可以“变身”为另一种形式,也可以不变。通过fixed+multi组合样式实现。
  • 变身模式下,支持折叠和展开效果。通过fixed+fold组合实现。
  • 变身模式下,展开层的tab列表和原本的tab列表是一一对应的,只是样式不同。通过初始化时复制一份拷贝,外加独立multi样式重定义实现。
  • 切换tab时,需要保持两个列表状态同步更新。通过类似于jQuery.index()方法检索当前tab的顺序。

需要达成的目标是:

  • DOM结构尽可能简单明晰。
  • 展开、折叠、变形都通过CSS定义,JS仅仅需要在合适的时机添加或删除一个class
  • 通过细粒度的样式定义,方便各个页面自定义视觉效果。

最后,不得不说,css3的伪类,太强大了!

参考链接:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!