Согласованная работа элементов Slide меню
Извиняюсь за тупость но уже нервов не хватает на это дело.
Суть проста: есть меню, тоесть 2 вертикально выпадающих вкладки с левой и правой стороны экрана. Всё работает на ура, но при открытие правая вкладка открывается по верх левой. А нужно чтобы при открытие одной из вкладок закрывалась вторая если она активна. Я уже перерыл половину сего форума и так и не понял как это реализовать на "своём" примере. Буду рад любой помощи.
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").toggle(function(){
$(this).parent().parent().find(".panel").animate({"width": "+=220px","height": "220"}, "slow");
$(this).toggleClass("active"); return false;
},function(){
$(this).parent().parent().find(".panel").animate({"width": "-=220px","height": "220"}, "slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<div class="body">
<div class="left">
<div class="panel">
<ul>
<li>Элемент меню</li>
</ul>
</div>
<p class="slide"><a href="" class="btn-slide">Меню</a></p>
</div>
<div class="right">
<div class="panel">
<ul>
<li>Элемент меню</li>
</ul>
</div>
<p class="slide"><a href="" class="btn-slide">Меню</a></p>
</div>
</div>
Извиняюсь за громоздкость css по большей части в нём ничего важного нет.
Код:
<style type="text/css">
body {
font: 75%/120% Arial, Helvetica, sans-serif;
}
.body {
padding:0;
}
.left{
float:left;
width:164px;
}
.right{
float:right;
width:164px;
}
.panel{
background: #000;
height: 265px;
overflow:hidden;
}
.left .slide {
position: absolute;
top: -150px;
left: 30px;
line-height: 1px;
border-left:solid 0px #000;
background: url(images/btn-slide-left.gif) no-repeat left center;
height: 250px;
width:38px;
float:left;
}
.left .panel{
float:left;
}
.right .slide {
position: absolute;
top: -150px;
right: 30px;
border-right:solid 0px #000;
background: url(images/btn-slide-right.gif) no-repeat left center;
height: 250px;
width:38px;
float:right;
}
.right .panel{
float:right;
}
.left .btn-slide {
background: url(images/white-arrow-hor.gif) no-repeat -45px 80px;
text-indent: -9000%;
display: block;
height: 250px;
width:38px;
}
.right .btn-slide {
background: url(images/white-arrow-hor.gif) no-repeat 15px 80px;
text-indent: -9000%;
display: block;
height: 265px;
width:38px;
}
.left .active {
background-position: 10px 80px;
}
.right .active {
background-position: -45px 80px;
}
.panel ul {
list-style:none;
border-bottom:0px solid #333;
padding:10px;
}
.panel ul a{
font-weight:bold;
color: #000;
white-space: nowrap;
}
</style>
Здесь можно увидеть как это выглядит => http://vs-anime.at.ua/ |