Create animated vertical Menu Using Jquery

Posted by on April 19th in Tutorials.

vmenu

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"><!--mce:0--></script>
<script src="vtip.js" type="text/javascript"><!--mce:1--></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.

2

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"><!--mce:2--></script>
<script src="vmenu.js" type="text/javascript"><!--mce:3--></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.

Vikas ghodke, 25 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

36 Comments

  1. Great!

    Does this support jQuery UI?

  2. [...] Continued here: Create animated vertical Menu Using Jquery | AcrisDesign [...]

  3. Social comments and analytics for this post…

    This post was mentioned on Twitter by acrisdesign: Create animated vertical Menu Using Jquery http://bit.ly/aMdiAV

  4. [...] the original post: Create animated vertical Menu Using Jquery | AcrisDesign If you enjoyed this article please consider sharing [...]

  5. [...] Follow this link: Create animated vertical Menu Using Jquery | AcrisDesign [...]

  6. Create animated vertical Menu Using Jquery…

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

  7. [...] Create animated vertical Menu Using Jquery [...]

  8. [...] Sim, eu sei que existem muitos tutoriais sobre o inferno do menu de navegação com css e jquery, e alguns deles são realmente surpreendentes que você pode conferir algumas de nossas pós 25 jQuery Tutorials Excelente para navegação no menu. Hoje eu venho com mais um tutorial sobre menu de navegação, mas desta vez o seu [. . . ] URL do artigo original http://acrisdesign.com/2010/04/create-animated-vertical-menu-using-jquery/ [...]

  9. [...] Create animated vertical Menu Using jQuery [...]

  10. [...] Continued here: Create animated vertical Menu Using Jquery | AcrisDesign [...]

  11. Great!

    Does this support jQuery UI?

  12. [...] the original post: Create animated vertical Menu Using Jquery | AcrisDesign If you enjoyed this article please consider sharing [...]


  13. Ian

    [...] the original post: Create animated vertical Menu Using Jquery | AcrisDesign If you enjoyed this article please consider sharing [...]

  14. [...] the original post: Create animated vertical Menu Using Jquery | AcrisDesign If you enjoyed this article please consider sharing [...]

  15. [...] Animated Vertical Menu Using jQuery (Tutorial) [...]

  16. Create animated vertical Menu Using Jquery post for thanx.

  17. [...] Create animated vertical Menu Using Jquery [...]

  18. Great tutorial,thanks for sharing.

  19. It looks nice, I would like to use it for my next design project.

  20. [...] Create animated vertical Menu Using Jquery [...]

  21. [...] Create animated vertical Menu Using Jquery [...]

  22. [...] Create animated vertical Menu Using Jquery [...]

  23. [...] with Navigation using jQuery UI( Demo | Download )Toggle Effect on Hover/Click( Demo | Download )Create animated vertical Menu Using Jquery( Demo | Download )Creating an Animated 404 Page( Demo | Download )Collapsing Site Navigation with [...]

  24. [...] Create animated vertical Menu Using Jquery [...]

  25. Great post very informative thank you !

  26. [...] Create animated vertical Menu Using Jquery [...]

  27. [...] Create animated vertical Menu Using Jquery [...]

  28. [...] jQueryAnimated Content Menu with jQueryjQuery Parallax Tutorial – Animated Header BackgroundCreate animated vertical Menu Using JqueryHow To Create a Cool Animated Menu with jQueryCustom Animation Banner with jQueryAnimated Landscape [...]

  29. Yes! Excellent piece, continue to keep in place the awesome job. This is the type of material that ought to obtain worldwide recognition for it’s workmanship. A lot more authors should learn from you. This is precisely on the money.

  30. [...] |  下載程式 Posted in: 前端動態   Tags: jQuery, 前端應用, [...]

  31. [...] Create animated vertical Menu Using Jquery [...]

Leave a Reply

Comment moderation is enabled. Your comment may take some time to appear.