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

slideoutreloaded

View demoDownload source

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!

View demoDownload source

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

Comments are closed.
  1. 1

    I am working on a project (Beta level) where I using this navigation drop-down. It is working fine in Opera, Firefox, Safari, Netscape but not in IE 8,
    can anyone suggest what is wrong with my code?
    The images and menu colours are hiding behind the banner images.
    the url is : http://www.premilgems.com/beta/default.asp

  2. 3

    Mary Lou,
    I REALLY want to use this for my website. For someone (like me) who knows very very little about html code, css & java where would I start to enable the learning process to be bale to use this navigation menu on my website. I am working currently with Dreamweaver CS5. Thanks -Jamie
    jamie@aves101.com

  3. 4

    Hi

    It is working fine in Firefox and Safari, but in IE 8 it doesn’t work.
    The position is wrong and the menu is too small in IE8.

    Can someone help me with my problem

    Thanks Nussi

  4. 5

    This is an amazing post! Thank you so much. I have one question, is there a way to have the navigational tab that the user is on remain out while that page is the one in use? Any help would be great!
    Megan

  5. 6

    Hi Mary,
    Excellent article, I’m trying to add this menu to my one-page-scrolling site, the problem I have is after i set the “home” page as current and click on a new link to scroll to the next section the “home” link stays current i.e expanded. How can i update my menu to reflect the change in scrolling?

  6. 7

    Sorry i forgot to mention I’m using ScrollTo, here is my code for the navigation:
    $(‘ul#navigation li a’).click(function(event) {
    event.preventDefault();
    var rel = $(this).attr(‘rel’);
    if (rel && $(‘#’ + rel)[0]) {
    $.scrollTo($(‘#’ + rel), 700);

  7. 8

    It is working fine in Firefox but in IE 8 it doesn’t work.
    The position is wrong and the menu is too small in IE8
    Unsupported value: ‘fixed’

  8. 9

    @Nio, “fixed” is not unsupported in IE8, and the menu works fine there. I tested it in both IE8 and IE7 and besides the rounded borders it has the same behavior and looks like in other modern browsers…

  9. 10

    How would I edit this code to enable each of the 7 different menu’s to slide down at different heights? For Example I would want Search & Photos to slide down ~1/4″ further than all the rest. Any info would be greatly appreciated.

  10. 12

    Please,

    How to use this for fading in 3 div’s, for example? Can’t use animate for fadeIn, if I’m right?

    Thanks and must say this site and tuts rocks… really :)

  11. 13

    Really great ! But i don’t have rounded borders in IE8 !
    Same thing when I test your “demo” in IE8 … no rounded borders.
    I have download your “zip files” … same thing… no rounded borders in IE8 !
    Do you have a solution ?

  12. 14

    well i cant get this to work in IE..any version. The menu shunts to the left with some nasty fonts and pushes the rest of the style sheet out. Works in firefox just fine

  13. 15

    All of these Demos all beautiful here! I came back a lot of times to get inspired! Thank You!

    I’m at the very beginning to use these ideas somehow. I wrote a little code based on one of Yours (but as I see I will use the FixedNavTutV2).
    My need is to slide a menu out with hover and move its mirrored picture out, too, what I don’t want to be activated by mouse. Can anyone help me?
    My first try is here:
    http://urbanshiatsu.hu/slideprobe/
    Thank You!

  14. 16

    Need to figure out how to contain the dropdown widget within a div. It displays outside (to the right) of all div tags (.container .header .widgetcontainer). What site CSS or widget CSS do I edit to get it to stay confined??

  15. 17

    Hello

    Great job!

    But I have one little question. Is there any posibility to change directions? For example I want to slide it from bottom to top – any suggestions?

    Best regards
    Chriss

  16. 18

    How can you center the Beautiful Slide Out Navigation on top rather than have it at the right margin?

  17. 20

    Nice news =)
    I’m understand how to do this, simple =)
    Just:
    ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 75px;
    right: 0px; <-
    list-style: none;
    z-index:9999;
    in style.css and enjoy :)

Comments are closed.