CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation

Today I want to show you, how to create an Apple-style navigation menu with a twist. Although “fancy” and “Apple-style” don’t really go together, I thought that it’s time for something different. This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons […]

applelikenav

View demoDownload source

Today I want to show you, how to create an Apple-style navigation menu with a twist. Although “fancy” and “Apple-style” don’t really go together, I thought that it’s time for something different.

This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element. This creates a neat “card-shuffle” effect.

The icons used in this tutorial can be found on DryIcons.com. I am not allowed to redistribute the icons under the free license, so I did not include them in the downloadable ZIP file. But you can easily find them here. I did not rename them for the tutorial so that you can easily recreate the navigation without changing the names or the stylesheet.

Ok, let’s get started!

1. The HTML

The markup just consists of a div with an unordered list inside. The list elements contain a span for the icon and the link element:

<div class="navigation">
 <ul class="menu" id="menu">
	<li><span class="ipod"></span><a href="" class="first">Players</a></li>
	<li><span class="video_camera"></span><a href="">Cameras</a></li>
	<li><span class="television"></span><a href="">TVs</a></li>
	<li><span class="monitor"></span><a href="">Screens</a></li>
	<li><span class="toolbox"></span><a href="">Tools</a></li>
	<li><span class="telephone"></span><a href="">Phones</a></li>
	<li><span class="print"></span><a href="" class="last">Printers</a></li>
 </ul>
</div>

2. The CSS

The style of the navigation container and the unordered list will be the following:

.navigation{
    position:relative;
    margin:0 auto;
    width:915px;
}
ul.menu{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menu li{
    float:left;
}

Since we are making the list float, we will need some relative wrapper for the icons. You see, the icons which will be the background-images of the spans in our list, will have absolute positioning. That comes handy when you need to define a z-index, i.e. saying that some element is on top or under another one. Since we want the icons to appear on top and then dissapear under the link element, we will have to deal with z-indeces. And absolute positioning of elements in a relative container will makes things easier.

Now, let’s define the style for the link elements:

ul.menu li a{
    text-decoration:none;
    background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}

We want to give the link elements a fixed width and some background gradient. The borders will create a nice inset effect.

The next hover class will be applied using jQuery, since the :hover pseudo class creates an unwanted effect: When the icon slides out it covers the link for a few milliseconds, making the hover style dissapear in that time. That is perceived as a flicker and we will avoid that by defining a class that we will simply add with jQuery when we do the icon slide out effect:

ul.menu li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}

The first and last link element should have a rounded border on the respective side, so we define two classes for those:

ul.menu li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menu li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}

The common style for all the icon spans will be the following:

ul.menu li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}

The single styles for the specific icons will contain the background-image and the x-position:

ul.menu li span.ipod{
    background-image:url(../icons/ipod.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
    background-image:url(../icons/video_camera.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
    background-image:url(../icons/television.png);
    left:293px;
}
ul.menu li span.monitor{
    background-image:url(../icons/monitor.png);
    left:423px;
}
ul.menu li span.toolbox{
    background-image:url(../icons/toolbox.png);
    left:553px;
}
ul.menu li span.telephone{
    background-image:url(../icons/telephone.png);
    left:683px;
}
ul.menu li span.print{
    background-image:url(../icons/print.png);
    left:813px;
}

As you can see, we are positioning the icons in such a way, that they are centered inside of the list element. The top position is 80px initially since we want to show them to the user when the page get’s loaded. Then we will hide them in a stair-like fashion to create an awesome effect!

3. The JavaScript

First, we want to create the effect of the icons dissapearing in a stair-like fashion and then we will define the hover function for the list elements:

$(function() {
    var d=1000;
    $('#menu span').each(function(){
        $(this).stop().animate({
            'top':'-17px'
        },d+=250);
    });

    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).addClass('hover');
            $('span',$this).stop().animate({
                'top':'40px'
            },300).css({
                'zIndex':'10'
            });
        },
        function () {
            var $this = $(this);
            $('a',$this).removeClass('hover');
            $('span',$this).stop().animate({
                'top':'-17px'
            },800).css({
                'zIndex':'-1'
            });
        }
    );
});

When hovering, we add the class “hover” to the link element, make the icon appear from the top, and increase the z-Index, so that the icon stays on top of the link. When the mouse goes out, we do exactly the opposite, which creates the effect that the icon dissapears behind the link element. For that we will allow more time (800 milliseconds) because it’s such a fun effect that the user might want to enjoy a little bit!

And that’s all!
I hope you like and enjoy it!

View demoDownload source

Message from TestkingJoin cisco training to learn jQuery and other useful web applications. Learn how to create fancy apple style slid out navigation in jquery using ccvp self study guide and ccda video tutorials.
Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 38

Comments are closed.
  1. 1

    Why doesn’t appear icons when I put all files out of /Fancy/ in directly in /localhost/? It seems like it can’s see icons or smth else… I’ve changed all links in style.css, etc. Maybe someone knows?

  2. 2

    @Konstantin The icons are not included in the ZIP file since I am not allowed to redistribute them under the free license. You can download them from dryicons.com. There is as well a direct link to the icon set at the beginning of this post. Hope it helps, cheers, ML

  3. 3

    Ok! Thks! May be my english isn’t great. so I wrote smth wrong!) Now I put all files,except “icons”, out of /Fancy/ to the root, and it works! I’ve even spread out all icons from “icon” straight to /Fancy/ and it works! But I don’t wunderstand why it doesn’t work if I, for example, rename “Fancy” folder to “icons”??It’s mystic!)) But your message I’ve understood!)Thank you!

  4. 4

    Dear Mary Lou, that tutorial is absolutely fantastic.
    I was wondering whether it is possible to integrate a sub-menu in slide-out for each of the tabs. If yes, can you tell me how…

    Take Care

  5. 6

    This is pretty neat. I love how it animates form the front and goes away form the back of the buttons. That’s slick!

  6. 7

    Lovely menu bar, working perfectly but asked for a change by client. What changes should i do if i dont want the icons to glide uowards when the page loads?

  7. 10

    thanks a ton Mary for this wonderful thought of Iconic process, i’m amazed at the things we could do with CSS, ur tutorials are like cake walk, especially this one , i’m a teacher myself but never knew that learning would be such an ease if we made it, thanks again :) looking fwd for more such adorable tutorials

  8. 11

    Great tutorial, thanks for sharing it. Question: Is there a way to modify the code so that the icons appear/disappear on hovering, but NOT all at once when each page is loaded?

  9. 13

    Thank you for your article, I’m sorry you do not have the Russian version = (

  10. 14

    Good afternoon,

    follow the step by step your tutorial, but I can not animate the menu. When I move the mouse over the menu, nothing happens. No icons appear. What could it be? I’m working with localhost before sending it to the server.

    Camilla M.

Comments are closed.