Apple has a new product nav menu that replaced their old horizontal scroller with some new animated candy.

The demo will take some time before all major browsers even support this cool new CSS wizardry. Never fear—you can create a similar menu with jQuery that works in every browser, even IE6.

Guts of the menu

At its heart, this isn’t a very complicated menu. You have a few hidden unordered lists that you scroll into view one item at a time, the animations have a slight easing to give the bouncy appearance, and the direction of the entrance and exit animations depend on the order you navigate through the menu (nice attention to detail).

How I set it up

The menu is made up of unordered lists inside the parent container:

<div id="menu-container">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</div>

The lists and list items are positioned absolutely so they pile up on top of one another, and when it’s time to animate I pull out the appropriate list’s items one at a time and position them with some simple math.

The controls for the menu are simple as well:

<div id="menu-controls">
    <a href="#" data-target="0">List 1</a>
    <a href="#" data-target="1">List 2</a>
    <a href="#" data-target="2">List 3</a>
</div>

The data-target attribute determines which list to animate when clicked. This target refers to the index of the list items. So target 0 refers to list 1, 1 to 2, etc. The script will add class="active" to the selected menu button’s <a> tag, so you can style accordingly.

Once the basics were down I firmed up the logic, added some animation easing, and made every piece of it customizable. The one thing I didn’t do was add the animated menu indicator (a triangle in Apple’s menu) that slowly animates to the active menu button. I consider that a flourish that goes along with the entire design of the Apple’s site. I left my demo on the simple side so the active button just gets bolded on mine.

The article source:http://cnanney.com/journal/code/creating-apples-new-slide-menu-with-jquery/