June 18th, 2007
新版 Apple 网站导航菜单
Category: CSS, Author: Nicky, Popularity: 11%
Apple 网站几天前改版了，配合即将上市的 Leopard 风格，让人眼前一亮。这个新版导航菜单其实很简单，就用了一个背景图片定位的技巧，千鸟把他称为 “单图转滚 (Single-image Rollovers)”。这个技巧在国外一些 CSS 网站中很常用，以前实现这个效果需要用到一大堆 JS，用 Dreamweaver 来做的话，就是那个 “交换图片” 的效果。而现在用 CSS 单图转滚来实现这个效果有两大好处：第一，使用简单的 CSS 就能实现繁杂的 JS 效果 (学习容易)；第二，相比多张图交换显示，这种方法不存在网络延时，图片只需要加载一次，整体效果和速度都不错。今天介绍的一些网站也使用了这种技巧，如 ashwebmedia (导航菜单图片)，还有最近出现的 Google Korea (菜单图片)，千鸟的一个打分 Demo 也很具代表性。
这个菜单基本原理是这样的，用 li 列表标签建立几个固定宽高的连续的块 (117*38)，每个块都用 globalnavbg.png 这个背景图片来填充，然后通过鼠标不同的状态 (link, hover, active) 来改变背景图片的位置，让它显示图片的某一部分来实现变换效果。另外发现 Apple 的 CSS 中使用不符合 W3C 规范的 “_ 下划线” 来 Hack CSS，目的是想在 IE6 中使用 .gif 图片来替换带有 Alpha 通道的 .png 图片，看来苹果还是在意数量庞大的 IE 用户。
Download New Apple Website Navigation Demo
Tags：Apple, CSS.
评论数量(9) | Add Comments
本文网址：http://www.osxcn.com/css/new-apple-website-navigation.html
苹果新版的导航菜单比原来的漂亮多了。。。
这种方法好像最早叫Pixy方法吧，发明者Pixy的博客：http://www.pixy.cz/index-en.html/ : )
nicky，能不能讲解一下apple.com右上方搜索框的CSS设置啊。谢谢！
网上有讲这种控件美化的贴子，好像是用多层div，没大看懂。
苹果没有直接美化控件，用了几张图片模拟的输入框。
http://images.apple.com/global/nav/images/searchfield_leftcap.png
http://images.apple.com/global/nav/images/searchfield_repeat.png
http://images.apple.com/global/nav/images/searchfield_rightcap.png
apple的东西就是漂亮啊
网上有讲这种控件美化的贴子，好像是用多层div，没大看懂。
Hello! Good Site! Thanks you! usbsykrewcbe
是的，这样的好处，很多，还记得第一次看到是在imdb上，他们的打分做得很有意思，于是也就学着做了一个，发现好处多多啊！
我以前在做导航条的时候也是碰到导航条的实现问题.现在看来还是apple的效果比较好.简单\清晰! 其实不需要很复杂的技术来实现,能达到技术和审美的综合就是成功了!