Here's the top of the sidebar navigation on the new iPhone features page. This is what its standard state looks like when I'm not hovering over:
<img class=”alignnone” title=”iPhone site nav” src=”/images/0906/apple_idle.png” alt="” width=”268” height=”249” />
Notice how all the links apart from the currently active section are grey. Here’s what happens when you hover your mouse cursor over these navigation links:
<img class=”alignnone” title=”iPhone site nav hover” src=”/images/0906/apple_hover.png” alt="” width=”268” height=”248” />
The link colors are now a much darker shade of grey.
This is very clever because it means that when you’re not browsing the navigation menu, its contents have less contrast against the white background, making them less prominent on the page. The menu fades away making it easier to focus on the content of the actual page. Most people tend to mouse over navigation bars when they browse them. When you do that here, the links become darker, so the contrast between the text and the white background becomes higher. This makes each link easier to read.
So what this does is set the right level of contrast for each context that the UI element is used in. I really like it. What do you think? Do you see any pitfalls with this technique?