flupoccuche
New Member
I am a beginner in web designing. i have a navigation bar on right side. i have defined class for li. i want all my li to animate and appear from right side.i am unable to do that. need some help. my html and css code are.\[code\]<!doctype html><html><head><link rel="stylesheet" href="http://stackoverflow.com/questions/15470882/index.css"><script src="http://stackoverflow.com/questions/15470882/jquery.js"> </script><script>$(function(){ $(".content-box-blue").animate({width:'350px'},1200); $(".content-box-gray").animate({width:'250px'},1200); $(".content-box-green").animate({width:'300px'},1200); $(".content-box-purple").animate({width:'400px'},1200); $(".content-box-red").animate({width:'200px'},1200); $(".content-box-yellow").animate({width:'250px'},1200);});</script><title>Demo</title></head><body><header></header><nav> <ul> <li class="content-box-blue"> </li> <li class="content-box-gray"> </li> <li class="content-box-green"> </li> <li class="content-box-purple"> </li> <li class="content-box-red"> </li> <li class="content-box-yellow"> </li> </ul></nav><footer></footer>\[/code\]css code for li are\[code\]ul {list-style-type: none;margin: 0;padding: 0;float: right;}li {margin: 0; padding: 0;margin-bottom: 20px;}nav {float: right;width: 400px;height: 500px;margin-top: 35px;margin-right: 10px;background-color: #ffffff;}.content-box-blue {background-color: #00bfff;border: 1px solid #afcde3;height: 50px;width: 0px;margin-left: 50px;border-top-left-radius: 8% 50%;border-bottom-left-radius: 8% 50%;}.content-box-gray {background-color: #FF69B4;border: 1px solid #bdbdbd;height: 50px;width: 0px;margin-left: 150px;border-top-left-radius: 12% 50%;border-bottom-left-radius: 12% 50%;}.content-box-green {background-color: #3CB371;border: 1px solid #b2ce96;height: 50px;width: 0px;margin-left: 100px;border-top-left-radius: 9% 50%;border-bottom-left-radius: 9% 50%;}.content-box-purple {background-color:#9370DB;border: 1px solid #bebde9;height: 50px;width: 0px;margin-left: 0px;border-top-left-radius: 6% 50%;border-bottom-left-radius: 6% 50%;}.content-box-red {background-color: #FF0000;border: 1px solid #e9b3b3;height: 50px;width: 0px;margin-left: 200px;border-top-left-radius: 13% 50%;border-bottom-left-radius: 13% 50%;}.content-box-yellow {background-color: #FFA500;border: 1px solid #fadf98;height: 50px;width: 0px;margin-left: 150px;border-top-left-radius: 12% 50%;border-bottom-left-radius: 12% 50%;}\[/code\]