Animated menu with jQuery and CSS

How’s it going guys?, I hope you’re doing great. Today we’re bringing you a very useful tutorial, it’s time for us to study how to develop a fancy slide menu using jQuery and CSS. Although it requires a considerable amount of code to run our menu, we will explain it as clear as possible to make it easy to understand, from organizing your folders to the complete source code, so you can have a complete guide throughout the entire process.

The essence of this code is generate an animated menu that ensures the visitor an interactive and pleasant experience and also notice the powerful tool that jQuery can be. OK guys it’s time, open your favorite web editor and let’s get it started.

DownloadView Demo

1. Define your menu’s performance

Before starting the programming process, you should have a defined graphic style for your menu, which a graphic designer usually does. What we are doing when talking about the menu’s performance is to determine how it’s going to behave depending of the different events that affect it, so, feel free to make some sketches to define that.

2. Check the required tools

OK, the first thing you need to know is the ingredients that will allow us to work with our menu, the recipe contains these 3 ingredients:

- XHTML

- CSS

- jQuery

3. Starting to work on our menu

We start by creating a folder with any name we want, this is where we are going to store all of our files and folders of the website. Now we must create a HTML file named index.html. It’s important to state the document’s type just like we show you up next.

<pre id="html" class="prettyprint">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</a>&gt;.</pre>
<h4>The complete code is the following:</h4>
<pre id="html" class="prettyprint">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</a>&gt;
&lt;html xmlns="<a href="http://www.w3.org/1999/xhtml&quot;">http://www.w3.org/1999/xhtml"</a>&gt;
	&lt;head&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
	&lt;title&gt;Slide menu with jQuery| iconshock&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
	&lt;/body&gt;
&lt;/html&gt;</pre>

We make 3 different folders with the following names:

css (styles folder)
img (images folder)

• js (JavaScript folders and jQuery libraries)

4. The CSS

Let’s create a CSS file named style.css, then save it inside the css folder. We establish the selectors with their respective statements as shown in the code below.

<pre id="css" class="prettyprint">@charset "utf-8";
/* CSS Document */
/**** Body ***/
body{
background:#aedae9;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:normal;
color:#FFF;
margin:0;
}
/**** Links ***/
a{ text-decoration: none;color:#FFF;}
a:link{ text-decoration:none;}
a:visited{ text-decoration:none;}
/**** Header ***/
#header{
     background: url(../img/background_header.png) no-repeat;
     width:1000px;
height:108px;
margin:auto;
}
.header_navigation{     float:right;     width:550px;     height:24px;     margin:24px 0 0 0;     }
/**** content ***/
#content{
     width:940px;
     margin:auto;
border-left:1px solid gray;
     border-bottom:1px solid gray ;
     border-right:1px solid gray ;
padding: 30px;
min-height:500px;
}
/**** Footer ***/
#footer{
width:1000px;
margin:auto;
}</pre>
Now we make another CSS file called main.css and we save it inside the css folder.
<pre id="css" class="prettyprint">.mainmenuslide{     height: 29px;
width:550px;
background: url("../img/background_main.png") no-repeat top;
position: relative;
padding: 15px 0 15px 0;
margin: 0 -10px 0;
}
.mainmenuslide li {
padding: 16px 0 11px 25px;
margin: -18px 0 0 9px;
float: left;
list-style: none;
}
.mainmenuslide li.back {
    background: url("../img/hover_main.png") no-repeat right -52px;
    width: 9px;
    height: 30px;
    padding: 0px 0 22px 0;
    z-index: 1;
    margin: -12px 0 0 8px;
    position: absolute;
}
.mainmenuslide li.back .left {
    background: url("../img/hover_main.png") no-repeat top left ;
    padding: 0px 0 22px 0;
    height: 30px;
    margin-right: 24px;
}
.mainmenuslide li a {
    font: bold 14px arial;
    top: 7px;
    z-index: 2;
    float: left;
    height: 30px;
    position: relative;
    margin: auto 10px;
    outline: none;
}</pre>

We call the styles that we’ve just created on the HTML file (index.html) inside of <head></head>and after <title></title>with the following code line.

<pre id="html" class="prettyprint">&lt;link href="css/style.css" type="text/css" rel="stylesheet" media="screen" /&gt;
&lt;link href="css/main.css" type="text/css" rel="stylesheet"  media="screen"&gt;</pre>
<h4>This is the complete code:</h4>
<pre id="html" class="prettyprint">&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Slide menu with jQuery | iconshock&lt;/title&gt;
&lt;link href="css/style.css" rel="stylesheet" media="screen" /&gt;
&lt;link rel="stylesheet" href="css/main.css" type="text/css" media="screen"&gt;
&lt;/head&gt;</pre>

Proceed by downloading the jQuery at this link and save them inside the js folder.

This files are necessary to our menu’s functionality, you must not alter the content. We download the page’s images down here and save them at the img folder.
We call the jQuery libraries on the index.html file in this way. Inside the tag <header></header> and after the CSS styles.

<pre id="javascript" class="prettyprint">&lt;script type="text/javascript" src="js/jquery-1.2.3.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.easing.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.mainmenusliden.js"&gt;&lt;/script&gt;</pre>

Check out the code:

<pre id="html" class="prettyprint">&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;slide menu with jquery | iconshock&lt;/title&gt;
&lt;link href="css/style.css" rel="stylesheet" media="screen" /&gt;
&lt;link rel="stylesheet" href="css/main.css" type="text/css" media="screen"&gt;
&lt;script type="text/javascript" src="js/jquery-1.2.3.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.easing.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.mainmenuslide.js"&gt;&lt;/script&gt;
&lt;/head&gt;</pre>

On the index.html file we must state the function that makes our menu have the sliding effect (after the previous scripts).

<pre id="javascript" class="prettyprint">&lt;script type="text/javascript"&gt;
    $(function() {
$("ul").mainmenuslide({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
&lt;/script&gt;</pre>

Notice the code:

<ul>
<pre id="html" class="prettyprint">&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Slide Menu with jquery | iconshock&lt;/title&gt;
&lt;link href="css/style.css" rel="stylesheet" media="screen" /&gt;
&lt;link rel="stylesheet" href="css/main.css" type="text/css" media="screen"&gt;
&lt;script type="text/javascript" src="js/jquery-1.2.3.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.easing.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.mainmenuslide.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(function() {
$("ul").mainmenuslide({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
&lt;/script&gt;
&lt;/head&gt;</pre>

Now we create the 3 div with the following id inside the body:

	<li>content (dynamic content)</li>
	<li>footer</li>
	<li>
<h4>And the code is:</h4>
</li>
</ul>
<pre id="html" class="prettyprint">&lt;div id="header"&gt;&lt;/div&gt;
&lt;!-- end header --&gt;
&lt;div id="content"&gt;

<p>We must place on this div the dynamic content of the page (content).</p>

</div>
<!-- end content –>
<div id="footer"></div>
&lt;!-- End footer—&gt;</pre>

Generate another div with the header_navigation class and then inside of it, we create a list which is every single link of the menu, by the way, we are leaving the menu with the lavaLampWithImage class.

Check out the code:

<pre id="html" class="prettyprint">&lt;div class="header_navigation"&gt;
    &lt;ul class="mainmenuslide"&gt;
&lt;li&gt;&lt;a href="#" alt=""&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" alt=""&gt;Portafolio&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" alt""&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" alt""&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" alt""&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;&lt;!-- end header_navigation—&gt;</pre>

5. And this how the menu works

The CSS style of menu.css is the one responsible of how the image that slides beneath every link of the menu looks.

<pre id="css" class="prettyprint">/* This class is in charge of the menu’s full size*/
.mainmenuslide{     height: 29px;
width:550px;
background: url("../img/background_main.png") no-repeat top;
position: relative;
padding: 15px 0 15px 0;
margin: 0 -10px 0;
}
/* This class manages the space and position of each*/
.mainmenuslide li {     padding: 16px 0 11px 25px;
margin: -18px 0 0 9px;
float: left;
list-style: none;
}
/* And this class determines the image’s range of the left side, which means that determines the start and end point
of our hover's expandability from the left side*/
.mainmenuslide li.back {
background: url("../img/hover_main.png") no-repeat right -52px;
width: 9px;
height: 30px;
padding: 0px 0 22px 0;
z-index: 1;
margin: -12px 0 0 8px;
position: absolute;
}
/* With this class we establish the image’s range of the right side, which means from where the left image closes.*/
.mainmenuslide li.back .left {     background: url("../img/hover_main.png") no-repeat top left ;
padding: 0px 0 22px 0;
height: 30px;
margin-right: 24px;
}
/*This class is for the link’s style*/
.mainmenuslide li a {     font: bold 14px arial;
top: 7px;
z-index: 2;
float: left;
height: 30px;
position: relative;
margin: auto 10px;
outline: none;
}</pre>

And now a graphic example:

6. Understanding the function

This is how our menu’s function works, kind of simple isn’t it?

<pre id="javascript" class="prettyprint">&lt;script type="text/javascript"&gt;
$(function() {
    //function to be done
$("ul").mainmenuslide({
        //tag y class to be captured on the function
fx: "backout",
speed: 700, //Sliding speed of our hover’s
click: function(event, menuItem) {
            //function to determine whether the link is active or not--&gt;
return false;
}
});
});
&lt;/script&gt;</pre>

And that was it, now you are able to create a nice slide menu using jQuery and CSS, if you have any suggestions about different ways of doing this, please let us know. We are also expecting your comments regarding tutorials that you’re waiting for. Bye bye.

DownloadView Demo