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

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

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:

Mary Lou

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

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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.