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 […]

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!

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.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 38

Comments are closed.
  1. Pingback: Tweets that mention CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Codrops -- Topsy.com

  2. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out … | Kerja Keras Adalah Energi Kita

  3. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out … | Drakz Free Online Service

  4. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out … | Drakz Free Online Service

  5. Pingback: jayQuery » Blog Archive » CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation

  6. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out … | Drakz Free Online Service

  7. Pingback: uberVU - social comments

  8. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Codrops « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  9. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Codrops » Web Design

  10. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Codrops : Popular Links : eConsultant

  11. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Dev Loom

  12. Pingback: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Codrops | digidisaster.de

    • I guess the code didn’t come through. Let me try that again.
      Why do you put the span class after the li tag instead of li= ” class” ?

    • Hi Shanna,
      you can give the class name as well to the li instead and then define the spans inside with the li.classname span. But that will neither decrease the markup nor the css that you have to write. Usually, I define the classes as specific as possible because sometimes you might have more than one span inside of a list element that you want to address differently. With saying li.classname span you refer to all spans in the li element though. I hope it answered your question 🙂

  13. Pingback: links for 2010-01-30 | Digital Rehab

  14. Great tutorial! 🙂

    Had some probs with the icons diapearing under my header…
    Took me quite some time to realise I should just set a higher z-index on the nav… ^^

  15. May I also suggest putting the <a> tag before the <span>, incase someone would click the icon instead.

  16. Lovely. Thank you for sharing this and for supplying the source files. Really nice navigation 🙂

  17. 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?

  18. @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

  19. 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!

  20. 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

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

  22. 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?

  23. 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

  24. 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?

  25. 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.