Home » Tutorials » JavaScript » How To Create A Beautiful Slide Out Navigation Within A Minute!

How To Create A Beautiful Slide Out Navigation Within A Minute!

How To Create A Beautiful Slide Out Navigation Within A Minute!

  • Stumble it!
  • Share

Today lesson is to demonstrate to you on how to create a beautiful slide out navigation with CSS and JQuery. Initially, all the menus of the navigation are almost hidden on screen and the menu will only slide out when the user is hover on them. This tutorial is targeted to absolutely beginners and I’ll try not to lose anyone, though, I promise.

Please check out the demo before we start our tutorial.

View Demo

Setup The Environment

The HTML structure for this tutorial is extremely simple, the only thing that we need for the navigation is an un-ordered list as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How To Create A Beautiful Slide Out Navigation Within A Minute | onlyWebPro</title>
</head>
<body>
<ul id="main_nav">
	<li><a href="#" class="apple">Apple</a></li>
    <li><a href="#" class="boy">Boy</a></li>
    <li><a href="#" class="cat">Cat</a></li>
    <li><a href="#" class="design">Design</a></li>
    <li><a href="#" class="elephant">Elephant</a></li>
    <li><a href="#" class="fox">Fox</a></li>
    <li><a href="#" class="gun">Gun</a></li>
    <li><a href="#" class="hot">Hot</a></li>
    <li><a href="#" class="ice">Ice</a></li>
    <li><a href="#" class="jazz">Jazz</a></li>
</ul>
</body>
</html>

Assign an ID for the navigation and unique class name for each menu item, because we will want to refer to it later in JavaScript.

The CSS Style

This is the part that we use to style the navigation and make it looks pretty. First of all, we ease-out the default styling of un-ordered list:

ul#main_nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

Then align every list item (better known as menu item in this case) side by side using the float property. Besides, we must set the value of the height of each menu item, so that the menu item will slide out when the user hover on the area of menu item.

ul#main_nav li {
	float: left;
	margin: 0;
	height: 100px;
}

For the clickable area of the menu item, we use the following styles:

ul#main_nav li a {
	color: #fff;
	text-align: center;
	padding: 30px 0;
	text-decoration: none;
    display: block;
    margin-top: -80px;
    min-width: 80px;
}

As you can see above, we have set the negative value of magin-top, because we want to hide most of the menu item and only reveal it when user hover on it. (See the following picture)

How To Create A Beautiful Slide Out Navigation Within A Minute!

Then the last part of CSS is to assign unique colors to every one of the menu item, so that it looks colorful and beautiful.

ul#main_nav li a.apple { background: #f01b44;}
ul#main_nav li a.boy { background: #fa941c;}
ul#main_nav li a.cat { background: #de383e;}
ul#main_nav li a.design { background: #f4382d;}
ul#main_nav li a.elephant { background: #faca13;}
ul#main_nav li a.fox { background: #df9d35;}
ul#main_nav li a.gun { background: #f24125;}
ul#main_nav li a.hot { background: #df912e;}
ul#main_nav li a.ice { background: #f7a51a;}
ul#main_nav li a.jazz { background: #f01b44;}

Adding Interaction

Now, is time to apply some magic to our navigation, so it will response to the input of users.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#main_nav > li').hover(
  function () {
   $('a',$(this)).stop().animate({'margin-top':'-15px'},100);
  },
  function () {
   $('a',$(this)).stop().animate({'margin-top':'-80px'},100);
  }
 );
});
</script>

Firstly, we need to include the latest jQuery library into our document. Then we write a JavaScript function to listen to the mouse hover event and run the function when user hover on the menu item. As you can see, we have set the value of margin-top to -15px, so that the menu item will slide in from top when the user hover on it; and we have set the value of margin-top to -80px (which is same with the value that we have set in the CSS just now), so that the menu item will return to its initial position when the user move their mouse away from the menu item.

Now, please save your work and preview it on browser, you should see something that same like the demo.

View Demo

Similar Tutorials for Absolutely Beginners


  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Make A jQuery Sticky Header In 5 Minutes
  • Create Sequential Animations in jQuery

  • Marte

    In Safari, OK. In Firefox, no.

    • http://www.onlywebpro.com onlyWebPro

      Hi marte,

      It works on my Firefox. I’m currently using Firefox v10.01.

  • http://www.facebook.com/zsombor.markus Zsombor Markus

    nice tut

  • gentlemedia

    Sorry, but I couldn’t help it to reproduce this effect with only CSS. For browsers that don’t support CSS3 transitions you could use then the jQuery as fallback.

    http://dabblet.com/gist/2428818

    • http://www.onlywebpro.com onlyWebPro

      @gentlemedia:

      Thank you so much! This is really a great work that you have share to other web developers and designers!

      Well done!

      Regards,
      onlyWebPro

  • http://twitter.com/imdesigntank Chris Raymond

    From a UI standpoint, no one would know this is navigation since all they see is color strips. Nice for jquery/css, but a usability fail, IMO.

    • http://www.onlywebpro.com onlyWebPro

      Hi Chris,

      Yup. I’m agree to your comment.

      This is just an experimental work and purposely for fun. You guys can tune it and improve it for better usability and apply the concept into up-coming project :)

Android, iOS Development Tutorials