анимация div для слайда с правой стороны

Я новичок в веб-дизайне. У меня есть панель навигации справа. Я определил класс для li. я хочу, чтобы все мои лики оживились и появились с правой стороны.анимация div для слайда с правой стороны

Я не могу этого сделать. нужна помощь. мой код html и css.

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" href="index.css"> 
<script src="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>

CSS код для литий являются

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%; 
}

источник

2013-03-18 shubendrak

Добавить следующие CSS в таблице стилей.

li{ clear:right; float: right; }

источник

2013-03-18 06:54:27

это работает для меня. благодаря тонну – shubendrak

Вы можете сделать поплавок прямо на <li> «s

вот demo

источник

2013-03-18 06:33:19 Reigel

float: правый; при этом он не запускает анимацию моего цветного окна с его позиции – shubendrak

добавьте 'clear: both;' так же, как демо ... – Reigel

это сработало. спасибо – shubendrak

Изменить все border-left-radius к right радиус и float:left к right

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
float: left; 
} 
li { 
margin: 0; 
padding: 0; 
margin-bottom: 20px; 
} 
nav { 
float: left; 
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-right: 50px; 
border-top-right-radius: 8% 50%; 
border-bottom-right-radius: 8% 50%; 
} 
.content-box-gray { 
background-color: #FF69B4; 
border: 1px solid #bdbdbd; 
height: 50px; 
width: 0px; 
margin-right: 150px; 
border-top-right-radius: 12% 50%; 
border-bottom-right-radius: 12% 50%; 
} 
.content-box-green { 
background-color: #3CB371; 
border: 1px solid #b2ce96; 
height: 50px; 
width: 0px; 
margin-right: 100px; 
border-top-right-radius: 9% 50%; 
border-bottom-right-radius: 9% 50%; 
} 
.content-box-purple { 
background-color:#9370DB; 
border: 1px solid #bebde9; 
height: 50px; 
width: 0px; 
margin-left: 0px; 
border-top-right-radius: 6% 50%; 
border-bottom-right-radius: 6% 50%; 
} 
.content-box-red { 
background-color: #FF0000; 
border: 1px solid #e9b3b3; 
height: 50px; 
width: 0px; 
margin-right: 200px; 
border-top-right-radius: 13% 50%; 
border-bottom-right-radius: 13% 50%; 
} 
.content-box-yellow { 
background-color: #FFA500; 
border: 1px solid #fadf98; 
height: 50px; 
width: 0px; 
margin-right: 150px; 
border-top-right-radius: 12% 50%; 
border-bottom-right-radius: 12% 50%; 
}

DEMO

источник

2013-03-18 06:44:02 Sowmya

, сделав это, сдвиньте навигационный блок в левую часть страницы. Я хочу, чтобы окно навигации было на правой стороне. и все цветные окна для анимации из их положения справа. – shubendrak

анимация div для слайда с правой стороны

ответ

Смежные вопросы