css3实现滑动菜单导航
记得我有篇博文是写用js来实现滑动菜单(个性导航)的例子
博文地址-js个性导航
demo演示-狠狠的点击这里
css3能实现吗?
随着css3的强大和流行,就用css3来实现了一个
怎么实现?
今天的主角是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了。
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:九监九介 来源: 深海博客
- 标签: 滑动菜单
- 发布时间:2012-09-20 13:52:54
- [37] 界面设计速成
- [31] 程序员技术练级攻略
- [30] 如何拿下简短的域名
- [30] Oracle MTS模式下 进程地址与会话信
- [29] 视觉调整-设计师 vs. 逻辑
- [29] android 开发入门
- [28] IOS安全–浅谈关于IOS加固的几种方法
- [27] 读书笔记-壹百度:百度十年千倍的29条法则
- [27] 图书馆的世界纪录
- [26] 【社会化设计】自我(self)部分――欢迎区