弧形排列的可折叠二级导航

<< 返回首页 教程(布局篇) >>

导航

简单解释一下思路。

最大的难点就是弧形排列,而且还是动态的、可折叠的。因此,各菜单项的位置不能做死。基本方法还是 CSS 教材中都会讲到的异形文本排版――用多个不同宽度的无语义空元素浮动,占位模拟曲线轮廓,从而限制文本在合理范围内流动。(我认为在这种场合,无语义元素是可以接受的。)

此外,还使用了一些小技巧来保证基本的用户体验,比如扩展菜单项热区,避免 hover 跳闪等等。CSS 代码中均有详细注释。

最终,无需 JS 进行定位计算,我们完全实现了纯 CSS 定位。同时,菜单项可自由增减,结构代码也清晰严谨。就是这样完美,甚至在古老的 IE6 下,它的表现都十分理想。