IamOverlord
سه شنبه 25 تیر 1392, 19:15 عصر
سلام!
ببین اینو می خوای...؟
از jQuery استفاده کردم...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- I am Overlord! -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
@font-face {
font-family: BBCNassim;
src:
url(BBCNassim.ttf),
url(BBCNassim.otf);
}
/*
6*50+500=800
50
500+50=550
*/
#container {
direction:rtl;
width:800px;
height:200px;
background-color:#333;
overflow:hidden;
font-family:BBCNassim;
border-width:5px;
border-style:solid;
border-color:#444;
}
.inner-div {
height:200px;
float:right;
position:relative;
}
.inner-div-a span {
width:50px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
font-size:18px;
white-space: nowrap;
position:absolute;
bottom:60px;
color:#FFF;
}
.inner-div-b div {
width:500px;
}
.inner-div-a {
width:50px;
height:200px;
float:right;
background-color:#3B8;
}
.inner-div-a:hover {
width:50px;
height:200px;
float:right;
background-color:#3C9;
cursor:pointer;
}
.inner-div-b {
width:0px;
height:200px;
float:right;
background-color:#444;
overflow:hidden;
}
.inner-div-expanded {
}
</style>
<script>
$(function(){
$('.inner-div-b:first').css('width','500px').parent().addClass(' inner-div-expanded');
$('.inner-div-a').click(function(){
if($(this).parent().children('.inner-div-b').css('width')!='500px'){
if($(this).parent().parent().children('.inner-div-expanded').children('.inner-div-b').css('width')=='500px'){
$(this).parent().parent().children('.inner-div-expanded').children('.inner-div-b').animate({
'width':'0'
}).parent().removeClass('inner-div-expanded');
$(this).parent().addClass('inner-div-expanded').children('.inner-div-b').animate({
'width':'500px'
}).parent().addClass('inner-div-expanded');
}
}
});
});
</script>
</head>
<body>
<div id="container">
<div class="inner-div">
<div class="inner-div-a">
<span>فرم ثبت نام</span>
</div>
<div class="inner-div-b">
<div>
<input type="text" />
<input type="text" /> <br />
<input type="text" />
<input type="text" />
<input type="button" value="تایید" />
</div>
</div>
</div>
<div class="inner-div">
<div class="inner-div-a">
<span>شهر و شغل</span>
</div>
<div class="inner-div-b">
<div>
<input type="text" />
<input type="text" />
<input type="button" value="تایید" />
</div>
</div>
</div>
<div class="inner-div">
<div class="inner-div-a">
<span>پیش نمایش</span>
</div>
<div class="inner-div-b">
<div>
<input type="text" />
<input type="text" /> <br />
<input type="text" />
<input type="text" /> <br />
<input type="text" />
<input type="text" />
<input type="button" value="تایید" />
</div>
</div>
</div>
<div class="inner-div">
<div class="inner-div-a">
<span>ارسال مدارک</span>
</div>
<div class="inner-div-b">
<div>
</div>
</div>
</div>
<div class="inner-div">
<div class="inner-div-a">
<span>پرداخت وجه</span>
</div>
<div class="inner-div-b">
<div>
</div>
</div>
</div>
<div class="inner-div">
<div class="inner-div-a">
<span>دریافت کد رهگیری</span>
</div>
<div class="inner-div-b">
<div>
</div>
</div>
</div>
</div>
</body>
</html>
107343