要求完成附件中的导航效果,中英文切换效果要求兼容所有浏览器;动画过渡效果高版本浏览器实现即可。
第一个版本之sunorry
第一个版本是用CSS Sprite实现,首先我制作的如下图片。
其中要注意的是图片必须确定每个导航栏的宽度高度。
实现过程
- 外部div设置宽度,高度(高度为图片的一半,以便挡住下方);
- div里包括ul和li,a,然后使用text-indent: -2000px;将文字移出,这样会让无css的情况下会出现文字;
- 动画过过渡:-webkit-transition: all 0.4s ease-out 0s;
#nav_normal{ background-position: -118px 0px; } #nav_normal:hover{ background: url(nav.png) no-repeat -118px -60px; }
nav导航之lin建议
- div不要加图片,因为图片在a上;
- <li>float后我在<ul>上加了overflow:hidden;让ul包含li,但是忘了ie,得加上zoom:1来出发haslayout闭合元素,以防li浮动出现bug;
- 若设置了text-indent 来把文字隐藏,最好加上overflow:hidden 来截断文字,以防出现不必要的问题;
nav导航之sunorry,无图
第一次思路是用二级菜单,将二级菜单定位到一级位置(margin-top: -28px;),然后display:none;最后hover时display为block。
这种思路结构复杂,且不能实现动画效果,在ie下也不行。
下来采用绝对相对定位。
- div的下的a中包含span;
- div30px,a30px,span30px(定位使其在a正下放);
- a:hover{top:-30px}
注意事项,过渡代码应写在<a>上,而不是span上。
注意hack
- 在*{font-size:20px}后,div{font-size:0}这是为了清除display:inline-block;后,各个<a>产生的空隙;
- 在span上cursor: pointer; 在ie下让鼠标也变成“手形状”;
- ie下的hover,a:hover{border: none; /*加了这句ie6下搞定了*/ padding: 0; /*ie8下就可以了*/}