技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> css3实现滑动菜单导航

css3实现滑动菜单导航

浏览:4354次  出处信息

记得我有篇博文是写用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了。

QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1