نحوه جابه جائی div [بایگانی]

doodkani1134

شنبه 23 شهریور 1392, 16:43 عصر

با سلام خیلی واجبه راهنماییم کنین خواهشا

من یک صفحه Html دارم با 2 div که اولی 10% سمت راست منو قرار داره و دومی 90% سمت چپ اسلایدر خبری قرار داره که اندازه اسلایدر 50% هست و در وسط div دوم یعنی در وسط 90% قرار داره، میخوام وقتی منوی سمت راست گزینه هاش(Li:Hover) باز شد منو از 10% به 40% تغییر اندازه بده و div دوم هم باید به 50% تغییر اندازه بده و اسلایدر به سمت چپ شیفت داده بشه و در صورتی که گزینه های منو بسته شدند دوباره صفحه به حالت اولیه برگرده .

دوست عزیز کل صفحه طولش 100% هست که به 2 قسمت 10% و 90% تقسیم میشود.
در قسمت 10% منو قرار داده میشود و در قسمت 90% یک اسلایدر به طول 50% قرار داده میشود که در وسط قسمت 90% قرار میگیرد.
حالا میخوام وقتی زیر منو های منو باز شدند منو از 10% به 40% تغییر موقعیت بده و قسمت دوم هم از 90% به 60% تبدیل بشه و در نهایت اسلایدر به سمت چپ شیفت داده بشه

Javidhb

شنبه 23 شهریور 1392, 17:51 عصر

برای شروع کارتون:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tessst</title>
<style type="text/css">
#wrapper{
width: 100%;
height: 500px;
display: block;
}
#right{
width: 10%;
height: 500px;
background-color: orange;
display: block;
float: right;
}
#left{
width: 90%;
height: 500px;
background-color: black;
display: block;
float: left;
}
.divs{
transition: width 2s;
-moz-transition-property: width 2s;
-webkit-transition-property: width 2s;
-o-transition-property: width 2s;
}
</style>
</head>
<body>

<div id="wrapper">
<div id="right" class='divs'>
<ul>
<li>test</li>
</ul>
</div>
<div id="left" class='divs'></div>
</div>

<script src="jquery-1.9.1.js"></script>
<script>
(function(){

$('#right li').hover(
function(){
$('#right').css('width', '40%');
$('#left').css('width', '60%');
},function(){
$('#right').css('width', '10%');
$('#left').css('width', '90%');
});

})();
</script>
</body>
</html>

فایل jquery یادتون نره....

doodkani1134

شنبه 23 شهریور 1392, 19:21 عصر

با تشکر فراوان بابت جوابدهی تون واقعا ازتون متشکرم ولی کد رو در یک فایل html کپی کردم فایل jquery هم دانلود کردم و گذاشتمش کنار فایل html ولی کار نمیکنه متاسفانه

Javidhb

شنبه 23 شهریور 1392, 20:00 عصر

ببینید درست نشون میده...