Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide […]

Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden.

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 inside of the list elements:

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

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: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}

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.

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

ul#navigation li {
    width: 100px;
}

For the links in the list elements, we define the following CSS properties:

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
}

The margin-left is set to a negative value because we want to hide most of the icon and only reveal it when we hover over the list items. Basically, we are pushing the link element to the left, outside of the visual area of the page:

slideoututorial1

In the JavaScript part we will define a function that makes the elements slide out. But let’s first add some rounded borders to them (they don’t work in Internet Explorer, though):

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
}

To make them really neat, we add some opacity, so that the content underneath is visible:

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

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);
}

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

The JavaScript

Using jQuery, we will make the icons appear whenever we hover over one of the list items. Remember, the list item itself is 100 pixel wide, only the link element is being pushed outside of the page to the left, so that it is not visible.

We define the following function (before the end of the body tag) that get’s executed whenever we hover over a li:

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

So, when hovering, we want the specific link element to get a left 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 (-85 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.

What would be really nice now, is to make the user aware that there is such an amazing navigation on your web page. Like it is now, the user will merely see some grey borders sticking out from the left side of the page. What could be better for showing the menu than actually showing the navigation shortly when the page loads. So, here we go.

So, we will initially let the navigation be visible. For that we change the left margin of the link elements:

ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

And we add the following line at the beginning of the JavaScript function:

$(function() {

 $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

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

With that line we defined that it should take 1 second to give a left margin of -85 pixels to all the link elements in the list. Through the margin that we set we will show the navigation to the user and with the JavaScript we will then hide it.

And that’s it!

If you are a shadow-freak (like me), you can also add these lines to the CSS of the link element:

ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}

Adding the box shadow and removing opacity, will give the navigation items a 3D look. Leaving the opacity makes them look cool, too, try it out and enjoy!
Note: Check out an alternative version of this tutorial here

Message from TestkingGet professional testking 350-001 web designing training to learn about css, jQuery and other usefull web design applications. We offer testking 640-802 tutorials and testking SY0-201 guides to help you become expert in web designing.

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 172

Comments are closed.
  1. Great looking plugin. Thanks for creating this. Is there any way to have the menu items open by default? In other words, have them in the hover state. Also, how would you center the menu vertically?

    • Hi Alex,
      if you want the menu items to stick out already, change the intial animation in the javascript function to ‘marginLeft’:’-10px’. In the hover function, change the values to ‘marginLeft’:’-2px’ (when hovering) and to ‘marginLeft’:’-10px’ (when mouse out). In the CSS you can change the margin-left to -85px in the “ul#navigation li a”. To center the whole thing you need the height of the menu which is the height of each item plus border times the number of item: 72*7 is 504. Then set the top of the ul#navigation to 50% and set margin: -252px 0px 0px 0px. The margin top needs to be the negative value of half of the height of the menu. And that’s it! Hope it helps!
      Cheers, ML

  2. Thank you, Mary Lou. This is a wonderful menu system, and the animation is very cool. Also, the great support you provide for questions makes it event better ๐Ÿ™‚

  3. fantastic work pal.. and your post is so informative thus will help anyone, if s/he want to…

  4. Hi Mary Lou

    Is there any way to have the tabs aligned to the bottom of the page with them sliding upwards? Any advice you have would be great.

  5. Iโ€™m not super experienced 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 (:

  6. Hello, congratulations on your website, sorry I wanted to know how to do that instead of the menu to be lateral is in the top, please I’ve tried it and can not.

  7. Excuse me, Please disregard my previous post. I saw the link that you gave to Mike, very good tutorial, congratulations,

  8. Fantastic tutorial mate.
    I’ve been looking for something like this.
    Nicely done

  9. Hello, thanks for your tutorial. I have one question, there are any way to fix one of the tabs with any animation?

    Thanks.

  10. Great use of jQuery, I appreciate how simple and to the point this script it. It was very easy to modify to suit my needs.

    Bookmarking this site and sharing it with others. ๐Ÿ™‚ Thanks so much!

  11. Very, very cool. Doesn’t work on the iPad. Damn that hover! ๐Ÿ™‚ Any way to do a first click open, second click choose?

  12. Hello its nice really but if i want same Effect with right Side means i want Right navigation with my Site , can anyone suggest me what need because i have try to customize it but not success waiting for reply thanks in advance.

  13. Mary Lou, I’m always staggered by how creative some people are, this is really beautiful, yet so simple and elegant. I would love to use this and wondered how/what would have to be changed to have this appear on the right-hand side, if this can be done? Thank you. ~ Raubie

  14. I read this tutorial and applied in my blog. Thanks for the posing.

  15. Hello its nice really but if i want same Effect with right Side means i want Right navigation with my Site , can anyone suggest me what need because i have try to customize it but not success waiting for reply thanks in advance.

  16. Cheers for the post man, is it that you is a pro. I think you might be. Many thanks, Zoe

  17. I am trying to figure out how to do this without the li being a link. But after hrs of trying, I can’t seem to figure it out ๐Ÿ™
    Can somebody help me please?

  18. Please tell me that youre going to keep this up! Its so good and so important. I cant wait to read more from you. I just feel like you know so much and know how to make people listen to what you have to say. This blog is just too cool to be missed. Great stuff, really. Please, PLEASE keep it up!

  19. Your work is awesome:)

    I have a question:
    This tutorial work great with jquery 1.3.2, but it crash with version 1.4.2. What I need change to have a working slide out on page??

  20. Has anyone used this menu in wordpress? How hard would it be to do? I really like it, and have used your code for a facebook tab on sites.
    thanks,

  21. How does one keep the icons right aligned on the page rather than on the left….any help will be appreciated. Thanks

  22. this is a cool jquery effect, but probably a bad application. There could be a huge usability issue here. you cannot hide navigation menu from users. you don’t see this issue right now because your demo page is blank. It would be annoying to use a hidden navigation menu once you fill it with a lot of information on the page. I would use this effect in doing something else but not a navigation menu.

  23. Mary Lou,

    I really like this navigation and would like to apply it to my website, but on the right side instead. I think I changed everything correctly. Except that when I changed the marginLeft to marginRight in the javascript, the objects move all together instead of individually. I didn’t change anything in the jquery and maybe I need to?

    If you can help that would be great!

    Thanks

  24. Hi, Mary Lou. Is there a way to add a button to the navigation so the user can partially “hide” it? I need to have a button so the user can set the buttons so they don’t auto-slide out when the user hovers over them. If the user clicks this “Hide” button, it serves as a toggle switch for this feature. Thanks.

  25. Hi, Mary Lou. Here’s how to set the buttons so they don’t slide in/out:

    var buttonState = false;

    function toggleHover(){
    if (buttonState){
    buttonState = false;
    $(‘#navigation > li’).unbind(‘mouseenter mouseleave’);
    } else {
    buttonState = true;
    $(‘#navigation a’).stop().animate({‘marginLeft’:’-10px’},1000);
    setTimeout(“$(‘#navigation a’).stop().animate({‘marginLeft’:’-85px’},900);”,3500);

    $(‘#navigation > li’).hover(
    function () {
    $(‘a’,$(this)).stop().animate({‘marginLeft’:’-2px’},200);
    },
    function () {
    $(‘a’,$(this)).stop().animate({‘marginLeft’:’-85px’},200);
    });
    }
    }

    $(function() {
    toggleHover();
    });

    The toggleHover() is a switch and will set the buttons back to have hover states if their hover is off, and turn that off if the hover is on. The jQuery unbind() function did the trick.

    There’s probably a better way of doing this, but this worked for me and hopefully it helps others ๐Ÿ™‚

  26. Hi. Firstly, I love this and this website. Have already recommended it to friends.

    However, one thing I would like to be able to implement – is there any way for a menu item to stay out; for example if on the home page, the relevant ‘home’ tab remains visible to the user? This would be fantastic if possible!

    Thanks, Matt

  27. Great!!! Just what i’ve been looking for. I’ve manage to alter the code and Walaa… My dream tools ๐Ÿ˜€ . Care to visit my website to see the result.
    (I use it to produce a customized menu and disabled tools)