Beautiful Slide Out Navigation Revised

After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan […]

After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone!

Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order to see what menu items exit. So, I thought about labeling the menu items and making them stick out, so the user can always “see” what the navigation entails. Being in a horizontal position makes everything readable and when the user hovers over the label, the rest of the item with the icon will slide out.

Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation.

The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. (It is not allowed to redistribute them under the free license, so I cannot include them in ZIP file of this tutorial.)

Ok, let’s get to work.

1. The HTML Structure

The only thing we will need for the navigation is a simple unordered list with links and spans inside of the list elements:

<ul id="navigation">
 <li class="home"><a href=""><span>Home</span></a></li>
 <li class="about"><a href=""><span>About</span></a></li>
 <li class="search"><a href=""><span>Search</span></a></li>
 <li class="photos"><a href=""><span>Photos</span></a></li>
 <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
 <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
 <li class="contact"><a href=""><span>Contact</span></a></li>
</ul>

The spans will carry the names of your menu items.
The list is getting an ID because we want to refer to it later in the JavaScript. With jQuery, we will make the link items slide out whenever we hover over the li elements of the list.

2. The CSS

First, we define the CSS properties for the list:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}

We position the list in the top right corner of the page.
The navigation should always be accessible for the user, even if he scrolls down the page. So, the position should be fixed. Margin and padding are explicitly set to 0, since the unordered list has default values for them. The navigation should also be on top of all other elements on the page. That’s why we set the z-index very high. The width is defined here, because I want to make the elements inside of the list floating. If I would not give this list an explicit width though, they would start moving and overlapping each other once I start resizing the page. In order to avoid that your floating elements start to e.g. move down when you resize the window, always put them in a container with a fixed width. (721px is the sum of all the li elements)

Now, let’s look at the list element properties:

ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}

If you want a list to be shown horizontally, set the display of the elements to inline. This will make them be next to each other rather than under each other.
For the links in the list elements, we define the following CSS properties:

ul#navigation li a {
    display: block;
    float: left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color: #E7F2F9;
    background-repeat: no-repeat;
    background-position: 50% 10px;
    border: 1px solid #BDDCEF;
    text-decoration: none;
    text-align: center;
    padding-top: 80px;
}

This is the common style for the link elements. We already define the properties for the background images that we will then put in separate class definitions. The text properties and the padding we need to set for the spans inside the link elements. The padding will push the spans to the bottom part.

Let’s add some rounded borders (they don’t work in Internet Explorer, though) and make the items semi-transparent:

ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

The last filter property will make this work for Internet Explorer as well.

These were the common properties of all the link elements in the list. Now we will define the background image for the links in the specific list items:

ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

When hovering over the elements, we want to change the background color in order to make them stand out a little bit more:

ul#navigation li a:hover{
     background-color:#CAE3F2;
}

Now we just need to add some style to the spans:

ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;
}

The text-shadow property will give the letters an engraved look (but it will not work in IE).

And that was the CSS part. Now, let’s take a look at the JavaScript that will give some life to the navigation.

The JavaScript

With jQuery we will first make all of the items disappear first in a “piano-like” way until the point that we can only see the text of the links. When hovering over an item, we will make the whole element slide out from the top. For all this, we define the following:

$(function() {
    var d=300;
    $('#navigation a').each(function(){
        $(this).stop().animate({
            'marginTop':'-80px'
        },d+=150);
    });

    $('#navigation > li').hover(
    function () {
        $('a',$(this)).stop().animate({
            'marginTop':'-2px'
        },200);
    },
    function () {
        $('a',$(this)).stop().animate({
            'marginTop':'-80px'
        },200);
    }
);
});

For creating the piano-like effect we define that for each of the link elements the top margin should be set to -80 pixels (this will make them move to the top outside of the screen). The effect for the first element should last  300 + 150 milliseconds and then each further element should disappear with an additional delay of 150 milliseconds.

When hovering, we want the specific link element to get a top margin of -2 pixels, and that nicely animated, and not too slow (200 milliseconds). Moving the mouse out shall put the link element back to it’s old position (-80 pixels). The stop() function “stops all the currently running animations on all the specified elements” which gives the beautiful effect when, for example, hovering over all elements very quickly.

And that’s it! I hope you like it – enjoy!

Message from TestkingWe offer 642-813 online course for those who want to learn jQuery. Our N10-004 guide and 220-701 tutorial contain complete knowledge of jQuery to help you become expert.

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 126

Comments are closed.
  1. Pingback: uberVU - social comments

  2. mmmm this one looks even better with the title of the menu showing! 😀 great work!

    • Hi David,
      in the span I just define the size, color and so on. The font family is the one of your CSS (that you define in your body properties), if you integrate this. I used “Arial” in the demo. I hope it helps,
      Mary Lou

      @Stefan: Thanks!

  3. It’s me again…. I continue with the fonts problems…

    I define a style for the body with the font style..

    Dreamweaver set the font in the html document.. in the design window I can see the Arial font… but when I do the preview it doesn’t set the Arial font… any suggestion?

    • @David
      Can you recognize, which font is shown in the preview? Maybe there is something wrong in the font definition and in the design Dreamweaver shows it correctly, but then rendered in a browser, it is not… Try to put this in the CSS of the body: font-family: Arial,Helvetica,sans-serif; Dreamweaver generates the shortage font:…, just take that out, maybe it helps.
      If you still have that problem, you can send me the css part and I take a look at it.
      Greetings,
      Mary Lou

  4. Pingback: Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops

  5. I solve it… I was definig a style only for the body, the I realized that I had to define a style for td and th.. and it works

    Thank U for ur help!

  6. Isn’t the main purpose of having icons on toolbar is to provide a quick visual reference to guide the user’s focus to the desired function. By hiding the icons until you hover over them, it’s nothing more than an ornament and doesn’t serve it’s original purpose. It forces the user to read the text.

    • In a lot of cases icons are a distraction especially when, as is the case far to often, they are overused. The way used here is excellent, not in the way or distracting yet a quick reassurance that you’re clicking the right link…

  7. So you can do it the opposite way.. u hide the text and show the icon.. so you can se the text when you hover over them…

    I think this is only the tool.. each person can use the way he wants…

  8. @John, lol where’s your blog with great worked out tutorials, and really well worked out javascript animations?

  9. Nice! but slight heavy and site using prototype cannot use because of conflict beteen jquery and prototype.js

  10. Donâ??t use [spans]â??s for text when working with links. Use the title-attribute of the [a]-link and/or put the text in the [a]-element directly.

    In CSS (non-JS scenario) you can use text-indent: -999px; in jQuery you can also empty() the element.

    + a dozen other methods.

    Just dont use the extra spanâ??s please for lazy-reasons 😀

    Awesome tutorial though, this navigation is quite awesome !!!

    • Hey TeMc,
      no problem 🙂 and thanks!
      I always use span in the link elements in lists because I usually have more elements in it that I want to address differently with style. But you are right, here it is not necessary. Thanks again!
      Greets,
      ML

  11. Do you think it possible to set this up in a scenario so that it isn’t on the edge of the screen? I was thinking maybe the Z-index attribute of CSS but.. I’m not sure.

  12. I’m not super expierenced with all of this. I was just wondering what goes into the header and what goes into the stylesheet. And what needs to be changed. I would really love to use this. Thank you! Email me at admin(at)ftskonline.com if you need (:

  13. Hi Mary Lou,

    Can you tell me if there’s a possible way for the navigation code to work on Google Chrome?

    • Hello Seo,
      what exactly do you mean? I tested it with Chrome version 4.1.249.1045 and it works fine. Which version do you have? If you downloaded the source, the icons are not included, maybe it is that? Cheers, ML

  14. Hallo Mary Lou,

    I would like to exclude this plugin completely from IE6 and earlier. Do you have any tips for how I could implement this requirement?

    Thanks,

    Padraig

  15. @Padraig
    I would first add a conditional statement in the head that makes the whole thing not being displayed if it’s IE6. For that you use
    <!--[if IE 6]> <style> ul#navigation{ display:none; } </style> <![endif]-->
    And then you add a condition in the JS:
    if (!($.browser.msie && $.browser.version.substr(0,1)<7)) { var d = 300; //here comes the rest }
    So, the menu will not show and the JS will not be executed if it’s IE6 or lower.
    I could not test this code right now, let me know if it works for you.
    Cheers,
    ML

  16. Thank you very much , Mary Lou. That has worked very well.

    That final trailing parenthesis ‘}’ – it doesn’t have a semi-colon, right?

  17. Hi, thank you for this great menu!
    Is it possible that one of the buttons is fixed? for example Home button open with hover color and icon, like a “current” mode?
    Thanks a lot!

  18. Yes, you can create a new class called current with the right position, i.e. -2px for margin-top. Then you need to give it to the “a” element that you want sticking out. Then you need to add not(‘.current’) to all the functions like this:
    $(function() { var d=300; $('#navigation a').not('.current').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); });
    $('#navigation > li').not('.current').hover( function () { $('a',$(this)).not('.current').stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).not('.current').stop().animate({ 'marginTop':'-80px' },200); } ); });
    I hope it helps! Let me know if you need more help, cheers, ML

  19. Thanks a lot! it works!
    Another more question: how can I move the text down near to the bottom of the buttons? I have tried with padding, margin, but nothing works.
    Thanks again for everything. 🙂 I’ll recommend your site.

  20. Hey, if you want to move the span even further down, you need to adapt the height of the “a” element and maybe it’s top-padding. If you, for example, decrease the height of the “a” you see the text being closer to the border. Did you mean that? I hope it helps,
    cheers, ML

  21. Hey!
    great tutorial, thanks very much!

    how can i get the menu to be fixed to the bottom of the page and reverse the effect (instead of items pop down into the screen making them pop up from the bottom)?

    thanks.

  22. Mary Lou, this is wonderful! I really love it!

    Quick question: I actually do want to slow down the animation a bit. I’ve messed with the ms timings in the js code, but it’s causing a ghosting issue with the bottom border when I hover. It’s like the bottom portion flickers and is not a smooth animation. Is there a way to fix this?

    Thank you!

  23. Mary Lou, one more thing. I successfully implemented the “current” class you described above so that the button associated with the current page stays visible. However, I want to keep the button the same color as the hover after I click it. That is, if the icon is visible, I want it to be a different color than those that are hidden.

    I tried accomplishing this by adding a background color property to the .current class, but it doesn’t work. When I hover over the “background-color” property of the .current rule in Dreamweaver, it says, “Background-color does not apply to your selection because it has been overridden by the rule ul#navigation li a.”

    I’m very new to CSS and don’t understand how to fix this. Hopefully I was clear in explaining my problem and how I want the page to display. Thank you for your help!!

  24. Mary Lou, disregard the previous request about background color for the .current class. I realized I needed to create a more specific rule, so I made a new rule that included the id “navigation.” Thus, all elements with the “current” class within the “navigation” id would be affected. I don’t know if this is the best way to accomplish what I wanted, but it worked!

  25. As a mainly perl/php programemr, I am getting blown away with the power of beauty of javascript using the jquery (and prototype et al) extenders.

    This menu is a prime example. I just can’t make up my mind if I like the vertical better than the horozontal layout, or vice-versa!

    I do however need a menu system that contains some sort of (flyout?) sub-menus. Whilst I think I’m reasonably competent, I can’t work out how they might be added to this menu style. Any tips and hints?

    • @Dan What exactly does not work? Do you have it online somewhere, I could take a look. Cheers, ML

  26. Thanks for sharing! Like your blog, very neat and full of useful information~ Keep it up!

  27. Hello,

    I really love this menu, it’s great.

    But I was wondering if there was a way to get it to function at the left side of the screen, like your original, with the text shown vertically on each menu item?

    Thank you.

  28. This is really fantastic. Exactly what I was looking for – with one exception. I need it to be on the left or right side of the screen (with text turned sideways). Is there an easy way to accomplish this?

    Thank you in advance.

  29. This is a great menu and I have it on one of my sites, but…I am having an issue when I try use lightbox on the same page. If they are on the same page, lightbox won’t work. Anyone else with this issue? Any workaround/suggestions?

    Thanks,
    Kelly

  30. This is easy to follow but I’m lost after step 1. Does anyone know how to define the css style in Dreamweaver CS5?

  31. Hi i have downloaded this wonderful jquery navigation menu, i was wondering how can i move it to the Left of my Header so its not at the Right like you said above “Set it to the right”