Want to make animated vertical menu in css with jquery then this is the best and simple tutorial for you, just go through it and enjoy the coding !
How to make animated vertical menu in css

CSS CODE

#verticle-menu
{
 list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDHJypQTgV8hkw8ipjbiBecKj00NbBm8d63KSdnlAdBiTBezTS2gNh8w8BMYaLPw6KwUEP8d1CmLpF4A2VkS635lkE_aDc7q5zM5W3VEcR_Ue9ij1rrJ_Oocv0q4gOQ-0PGJaoQhDsaAy/s0-U-I/list-icon.png);
}
#verticle-menu li
{
margin:5px 0px; 
}
#verticle-menu li a
{
 text-decoration:none;
 color:#333;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
}
#verticle-menu li a:hover
{
 font-weight:bold;
}

JQUERY CODE

HTML CODE

Home
About Us
Our Services
About Company
Our Products
Contact Us

Download File Used in this example View Live Demo

Total Downloads:

Want to make custom animation with jquery then have a look at this example and customize it according to your need.

Jquery Block Animation

CSS CODE

body{font-family:Arial, Helvetica, sans-serif;}
p{font-size:12px;color:#fff;text-align:center;text-shadow:1px 1px 1px #333;}
#container{width:200px;height:300px;background:#01b0ec;margin:100px auto auto auto;border:solid 1px #333;overflow:hidden;}
#container #c1{font-size:22px;color:#fff;text-shadow:1px 1px 1px #333;text-transform:uppercase;text-align:center;width:110px;margin:20px 0px 0px -155px;}
#container #c2{width:70px;height:80px;margin:-140px auto auto auto;}
#container #c3{margin:20px 0px 0px -200px;width:200px;}

Jquery COde

HTML CODE

Contribute



After surfing through hundreds of jsperf tests, today I bring to you jsperf – best of (2000-2013).After surfing through hundreds of jsperf tests, 
        

Download File Used in this example

Total Downloads:

This is a tutorial of very usefull and simple Jquery Popup on page load.Just copy and paste this code in your web design and enjoy this popup. You may customize this popup as according to your need.

CSS

#popup
{
 width:560px;
 height:360px;
 background:#00CC33;
 color:#fff;
 padding:20px;
 position:absolute;
 top:0%;
 left:50%;
 margin-top:-500px;
 margin-left:-250px;
}
#popup h1
{
 margin:0px;
 padding:0px;
}

Jquery

HTML

Jquery Popup On Page Load Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Download File Used in this example View Live Demo

Total Downloads:

Many times in web designing we want to repeat animation in jquery. We can animate jquery animations by infinite times, here is the quick example for doing this.

CSS

#rectangle
{
 width:100px;
 height:100px;
 background:#00CC66;
}

Jquery

HTML

Download File Used in this example View Live Demo

Total Downloads:

You can animate any css property using CSS, here is the easiest tutorial of animate div using jquery.

CSS

#maindiv
{
 width:300px;
 height:300px;
 background:#CCCC00;
 margin-top:50px;
}

Jquery

HTML

Annimate Left|
Annimate Right|
Annimate Top|
Annimate Bottom

Download File Used in this example View Live Demo

Total Downloads: