记得我有篇博文是写用js来实现滑动菜单(个性导航)的例子

博文地址-js个性导航

demo演示-狠狠的点击这里

css3能实现吗？

随着css3的强大和流行，就用css3来实现了一个

css3 demo演示

怎么实现？

今天的主角是nth-child选择器和 ~ 选择器，以及transition来打下龙套。简单介绍下：

:nth-child(n) 选择某个元素的一个或多个特定的子元素，n表示第几个。例如 p span:nth-child(1)，选中p下面的第一个span，n是从1开始的，这很怪，猜是 w3c 的家伙集体打瞌睡了。n 也可以是表达式，如 2n 表示选择所有偶数个，等于even；2n+1 表示选择基数个，等于 odd；3n表示选择顺序是 3的倍数的子元素等等；
~ 兄弟选择器，选择跟在某个元素后面的特定兄弟元素，例如 p ~ div选中跟p同级，且在p后面的div；
+ 临近兄弟选择器，是 ~ 的特例，选择紧跟在某个元素后面的一个特定兄弟元素，p + div则只选中贴着p的屁股的第一个div。

滑动的背景用最后一个li实现，在鼠标移到第某个li上面的时候，就设置跟在其后面的bubble节点的left为 为相应的值。

本地bug？

在chrome中以本地文件的方式打开demo页时，对hover跟~一起用的情况处理有bug。如果一开始就把鼠标移到第二个以后的菜单项，背景的定位就会不准确。除非先把鼠标移到第一个或第二个菜单项，之后表现就完全正常了。不过这东西都是网站上用的，没有人放在本地运行吧？

有什么局限？

细心的人可能也发现了，就是这里的菜单项都是等宽的，以及定位都是预先写好的，有多少个菜单项就要写多少个定位。对此我也很无奈 — 目前的css还不支持动态计算诶。css3唯一一个计算的属性 cal （哦，忘了还有min和max），却也不适应这种情况。所以如果想做成能动态添加菜单的，只能加点js了。