The New York Times Navigation Bar Could be Improved

The navigation bar on The New York Times website doesn't look finished. I'm sure I'm not the first to notice this, but it hasn't changed since they launched the new site a few months ago. So, I took a stab at improving it.

The Setup

When you visit The New York Times website, the navigation bar is 155px below the top, centered horizontally, and 28px tall. When the navigation bar reaches the top of the window (after scrolling), it becomes anchored to the top.

The Problem

At this point, the navigation's layout changes dramatically. Two new items are added to the left and one is removed from the right. On top of that, the navigation items become left aligned and the bar becomes taller.

But there's no transition. Jarring is the first word that comes to mind. Here's a quick video that demonstrates the issue.

New York Times Menu from David Myers on Vimeo.

The Solution

I'm going to assume that the differences between the two versions of the navigation are absolutely necessary. That being said, it wouldn't be hard to add some transitions to soften the jarring switch.

I think the new navigation items should fade in, and the existing ones should glide to the left.

I've quickly thrown together a demo of how I'd hope The Times would improve their menu. Give it a try, I think it's a huge improvement. Is my version perfect? Of course not, I hacked it together on a Saturday morning while "watching" my nine month old.

But it's a start.

Update

Just wanted to address some comments I've gotten.

1. Yes, I know this doesn't work great in mobile. This solution is for The Times desktop site. Even so, it'd be easy enough to come up with a complete solution.
2. I've (mostly) fixed the demo in FireFox
3. How'd I do it? With CSS3 transitions and a little JavaScript to calculate the width of the menu items. This wouldn't work for older browsers. But, since we're leaving the markup as is, older browsers would just continue to work in the current fashion, and modern browsers would work better. Check out the source of the demo for the details, but for those interested, I've included the pertinent transition code below.

HTML:

<div id="container">
    <header>
        <h1>New York Times</h1>
    </header>
    <div class="menu"> 
        <ul>
            <li class="icon hamburger">&nbsp;</li>
            <li class="icon search">&nbsp;</li>
            <li>World</li>
            <li>U.S.</li>
            <li>New York</li>
            <li>Business</li>
            <li>Opinion</li>
            <li>Sports</li>
            <li>Science</li>
            <li>Arts</li>
            <li>Fashion &amp; Style</li>
            <li>Video</li>
        </ul>
    </div>
    <div class="content">
    ...
    </div>
</div>  

JavaScript:

$(window).bind('scroll', function() {
 if ($(window).scrollTop() > 119) {
     $('#container').addClass('scrolled');
     var width = 50;
     $('.menu UL LI').each(function(index, el){
      width += $(el).width() + 4;
     });
     $('.menu UL').css('width', width + 'px');
 } else {
     $('#container').removeClass('scrolled');
     $('.menu UL').css('width', '942px');
 }
});

CSS

.menu {
    padding:4px;
    transition: padding 100ms linear;
    -webkit-transition: padding 100ms linear;

}

.scrolled .menu {
    position: fixed;
    top:0;
    padding-top:8px;
    padding-bottom: 8px;
}

.menu UL {
    width:942px;
    transition: width 100ms linear;
    -webkit-transition: width 100ms linear;
}
.menu UL LI.icon {
    display:block;
    visibility: hidden;
    float: left;
    width:25px;
    transition: visibility 250ms linear;
}
.menu UL LI.icon.hamburger {
    background: url('/nytimes/hamburger.png') no-repeat 0 -7;
}
.menu UL LI.icon.search {
    background: url('/nytimes/search.png') no-repeat 0 -7;
}
.scrolled .menu UL LI.icon {
    visibility:visible;
}