Create animated vertical Menu Using Jquery

Create animated vertical Menu Using Jquery

Yeah i know there are hell lot of tutorials on navigation menu with css and jquery and some of them are really amazing you can check out som... 00:38

Yeah i know there are hell lot of tutorials on navigation menu with css and jquery and some of them are really amazing you can check out some in our post 25 Excellent jQuery Tutorials for Navigation Menu . Today i come up with one more tutorial on Navigation menu but this time its animated vertical navigation menu with css and jquery. So lets start creating it before we start please check out the demo.

DEMO

STEP 1

First of all we need to set up our files, so lets create one html, css and js files along with one image folder which holds all our images which has been used in creating this vertical menu. Now we need to code our HTML document first. So lets start writing some html codes for vertical navigation menu.

<div id="nav">
<ul>
	<li><a href="#"><img src="images/home.png" alt="" width="65" height="52" /></a>
 
Home</li>
	<li><a href="#"><img src="images/portfolio.png" alt="" width="65" height="52" /></a>
 
Portfolio</li>
	<li><a href="#"><img src="images/about.png" alt="" width="65" height="52" /></a>
 
About</li>
	<li><a href="#"><img src="images/contact.png" alt="" width="65" height="52" /></a>
 
Contact</li>
</ul>
</div>

Final Html Document.

 
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="vtip.js" type="text/javascript"></script>
<div id="wrapper">
<div id="content">
<h2>Create animated vertical Menu Using Jquery</h2>
Lorem Ipsum lroem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</div>
<div id="nav">
<ul>
	<li><a href="#"><img src="images/home.png" alt="" width="65" height="52" /></a>
 
Home</li>
	<li><a href="#"><img src="images/portfolio.png" alt="" width="65" height="52" /></a>
 
Portfolio</li>
	<li><a href="#"><img src="images/about.png" alt="" width="65" height="52" /></a>
 
About</li>
	<li><a href="#"><img src="images/contact.png" alt="" width="65" height="52" /></a>
 
Contact</li>
</ul>
</div>
</div>

STEP 2

So now html documentation is ready, lets give some css styling to it. First of all we need to style our vertical navigation menu to achieve our desired output. The overflow for #nav must be hidden because we don’t want to show our Menu text on page load.

#nav {
	width:100px;
	float:left;
	overflow:hidden;
}
ul{
    margin:0;
    padding:0;
}
li {
	width:52px;
	float:right;
	margin-top:20px;
	height:52px;
	background-color:#d4e8e7;
	position:relative;
	list-style:none;
	font:Georgia, "Times New Roman", Times, serif;
	color:#ef7a1a;
	font-size:18px;
}
#nav li p {
	margin-left:70px;
	margin-top:-40px;
	position:relative;
}
 
#content {
	float:right;
	text-align:center;
	width:298px;
	height:375px;
	background-color:#d4e8e7;
	border: 1px solid #d4e8e7;
	/* Rounder Corner */
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}
#content h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	color:#333;
	margin-top:20px;
	margin-bottom:10px;
	text-shadow: 0px 1px 2px #999;
}

Our vetical menu looks something like this now.

STEP 3

Now we are done with styling our menu. Lets link jquery file to our html document along with custom empty js file named vmenu.js which contains all the custom jquery codes.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="vmenu.js" type="text/javascript"></script>

STEP 4

Last and final step of our tutorial is to give life to our navigation menu using jquery. Here we will use .animate() function to achieve our desired effect. We will change the size of li to get the effect. All the explanation included as comments in below codes.

$(document).ready(function(){
 
    //When mouse roll over on menu icon
    $("li").mouseover(function(){
	//The below code is used to give animated effect to menu
        $(this).stop().animate({
	//Change the size of navigation menu to 152px
    width: "152px",
	//Time
  }, 500 );
    });
 
    //When mouse cursor removed from menu icon
    $("li").mouseout(function(){
        $(this).stop().animate({
	//Back to normal width 52px
    width: "52px",
  }, 500 );
    });
 
});

DEMO

Remarkable online cpa, 350-030 dumps and ccda training programs will lead you to success in the network+ certification. We also offer latest 640-721 braindumps and 000-106 dumps with 100% success guarantee.