Всем привет, прошу сразу не судить строго, я только учусь )). Понадобилось сделать раздвижное меню, что то похожее на меню в стиле аккордион. Есть главный блок div, который находится посредине страницы, ну и собственно меню ссылки внутри него. При нажатии на ссылку, главный div изменят свою ширину с помощью функции animate и также становится посредине, и параллельно с ним должен расширятся div внутри, в котором будет контент. но почемуто div внутри не раздвигается если добавить раздвижении главного, а без него анимация с помощью функции animate работает, но не плавно.
Исходный код по возможности упростил как мог, чтобы выложить сюда.
P.S. перед этим была попытка сделать точно такое же меню, но используюя ul и li, и там ВСЕ РАБОТАЛО, но понадобилось сделать именно используя div
За ранее Спасибо всем тем кто откликнется
<div id="content">
<div><a href="#" name="a1"><img src="img/img-main-off.png" ></a></div>
<div id="asd"></div>
<div><a href="#" name="a2"><img src="img/img-about-off.png" ></a></div>
<div ></div>
<div><a href="#" name="a3"><img src="img/img-location-off.png" ></a></div>
<div></div>
<div><a href="#" name="a4"><img src="img/img-about-off.png" ></a></div>
<div></div>
<div><a href="#" name="a5"><img src="img/img-location-off.png" ></a></div>
<div></div>
</div>
$(document).ready(function(){
var openclose = '';
var menuname = '';
var oldmenuname ='';
$("#content div a").click(function(){
if (openclose == '')
{
menuname = this.name;
$('#content').animate({'width':'960px','margin-left':'-480px'},500);
$('#asd').animate({'width':'659px'},500);
}
else
{
};
});
});
|
Код:
|
#content{
width:300px;
height:460px;
position:absolute;
left:50%;
top:230px;
padding:0px;
margin-left: -150px;}
#content div {
float: left;
display:inline-block;
} |
