六月 18th, 2007

新版 Apple 网站导航菜单

Category: CSS, Author: Nicky, Popularity: 12%
apple_website_navigation.png 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：, .
评论数量(10) | Add Comments
本文网址：http://www.osxcn.com/css/new-apple-website-navigation.html



10 Comments so far

» You can leave a response or Trackback .

  1. Gravatar Icon Alucard.G Says: 2007-06-18 1:14 下午
    苹果新版的导航菜单比原来的漂亮多了。。。
  2. Gravatar Icon Quadfolius Says: 2007-06-18 4:57 下午
    这种方法好像最早叫Pixy方法吧，发明者Pixy的博客：http://www.pixy.cz/index-en.html/ : )
  3. Gravatar Icon siegyu Says: 2007-06-18 10:45 下午
    nicky，能不能讲解一下apple.com右上方搜索框的CSS设置啊。谢谢！ 网上有讲这种控件美化的贴子，好像是用多层div，没大看懂。
  4. Gravatar Icon Nicky Says: 2007-06-18 10:58 下午
    苹果没有直接美化控件，用了几张图片模拟的输入框。 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
  5. Gravatar Icon 美女图片 Says: 2007-06-19 8:45 上午
    apple的东西就是漂亮啊
  6. Gravatar Icon oiepwqepor Says: 2007-06-19 8:44 下午
    网上有讲这种控件美化的贴子，好像是用多层div，没大看懂。
  7. Gravatar Icon jzyhuthpke Says: 2007-06-27 12:39 上午
    Hello! Good Site! Thanks you! usbsykrewcbe
  8. Gravatar Icon 北师大蛋蛋网 Says: 2007-09-06 3:05 下午
    是的，这样的好处，很多，还记得第一次看到是在imdb上，他们的打分做得很有意思，于是也就学着做了一个，发现好处多多啊！
  9. Gravatar Icon jameguilin Says: 2007-09-30 11:34 上午
    我以前在做导航条的时候也是碰到导航条的实现问题.现在看来还是apple的效果比较好.简单\清晰! 其实不需要很复杂的技术来实现,能达到技术和审美的综合就是成功了!
  10. Gravatar Icon chenfei Says: 2009-12-28 3:23 下午
    http://www.isstudy.com

1 Trackbacks/Pingbacks

leave a reply