Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Beautiful Slideout Navigation with jquery and css

Beautiful Slideout Navigation with jquery and css

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

01.<ul id="navigation">
02.<li class="home"><a title="Home"></a></li>
03.<li class="about"><a title="About"></a></li>
04.<li class="search"><a title="Search"></a></li>
05.<li class="photos"><a title="Photos"></a></li>
06.<li class="rssfeed"><a title="Rss Feed"></a></li>
07.<li class="podcasts"><a title="Podcasts"></a></li>
08.<li class="contact"><a title="Contact"></a></li>
09.</ul>
Beautiful Slide Out navigation by JQuery and css

Beautiful Slide Out navigation by JQuery and css

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.
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):
01.ul#navigation li a {
02.display: block;
03.margin-left: -85px;
04.width: 100px;
05.height: 70px;
06.background-color:#CFCFCF;
07.background-repeat:no-repeat;
08.background-position:center center;
09.border:1px solid #AFAFAF;
10.-moz-border-radius:0px 10px 10px 0px;
11.-webkit-border-bottom-right-radius: 10px;
12.-webkit-border-top-right-radius: 10px;
13.-khtml-border-bottom-right-radius: 10px;
14.-khtml-border-top-right-radius: 10px;
15.}
ul#navigation .home a{
02.background-image: url(../images/home.png);
03.}
04.ul#navigation .about a      {
05.background-image: url(../images/id_card.png);
06.}
07.ul#navigation .search a      {
08.background-image: url(../images/search.png);
09.}
10.ul#navigation .podcasts a      {
11.background-image: url(../images/ipod.png);
12.}
13.ul#navigation .rssfeed a   {
14.background-image: url(../images/rss.png);
15.}
16.ul#navigation .photos a     {
17.background-image: url(../images/camera.png);
18.}
19.ul#navigation .contact a    {
20.background-image: url(../images/mail.png);
21.}

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() {
02.$('#navigation > li').hover(
03.function () {
04.$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
05.},
06.function () {
07.$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
08.}
09.);
10.});

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:

01.ul#navigation li a {
02.display: block;
03.margin-left: -2px;
04.width: 100px;
05.height: 70px;
06.background-color:#CFCFCF;
07.background-repeat:no-repeat;
08.background-position:center center;
09.border:1px solid #AFAFAF;
10.-moz-border-radius:0px 10px 10px 0px;
11.-webkit-border-bottom-right-radius: 10px;
12.-webkit-border-top-right-radius: 10px;
13.-khtml-border-bottom-right-radius: 10px;
14.-khtml-border-top-right-radius: 10px;
15.opacity: 0.6;
16.filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
17.}
And we add the following line at the beginning of the JavaScript function:

01.$(function() {
02.
03.$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
04.
05.$('#navigation > li').hover(
06.function () {
07.$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
08.},
09.function () {
10.$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
11.}
12.);
13.});

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:

01.ul#navigation li a {
02.display: block;
03.margin-left: -2px;
04.width: 100px;
05.height: 70px;
06.background-color:#CFCFCF;
07.background-repeat:no-repeat;
08.background-position:center center;
09.border:1px solid #AFAFAF;
10.-moz-border-radius:0px 10px 10px 0px;
11.-webkit-border-bottom-right-radius: 10px;
12.-webkit-border-top-right-radius: 10px;
13.-khtml-border-bottom-right-radius: 10px;
14.-khtml-border-top-right-radius: 10px;
15.-moz-box-shadow: 0px 4px 3px #000;
16.-webkit-box-shadow: 0px 4px 3px #000;
17.}
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!

Advertisements
  1. December 15, 2009 at 8:32 pm

    nice job ! well done

  2. January 8, 2010 at 3:10 am

    Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!

  3. aishwarya
    June 18, 2013 at 6:14 pm

    hi can u plz let me know how do i shift menu left side to right 😦

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: