Скрипт не мой, где-то я его утащила и переделала. Где - не помню. Прелесть в том, что в свернутом состоянии это всего лишь столбик иконок, который занимает совсем мало места.
Никто мне не осудит, если в качестве демо выложу ссылку на свой форум? Демо смотреть в объявлении.
HTML-верх:
(менять не надо)
<script type="text/javascript">
(function($) {
$(function() {
$('div.box').css('margin-left','-492px');
$('ul.tabs').delegate('li:not(.current)', 'click', function() {
$(this).stop().animate({'marginLeft':'540px'},400).siblings().animate({'marginLeft':'0px'},400)
.parents('div.section').find('div.box').eq($(this).index()).css('display','block').animate({'marginLeft':'50px'},400).siblings('div.box').animate({'marginLeft':'-490px'},400).css('display','none');
$(this).addClass('current').siblings().removeClass('current');
}
)
$('ul.tabs').delegate('li.current', 'click', function()
{
$(this).stop().animate({'marginLeft':'0px'},400)
.parents('div.section').find('div.box').eq($(this).index()).animate({'marginLeft':'-760px'},400);
$(this).removeClass('current');
}
)
})
})(jQuery)
</script>Собственно сами контейнеры
(засовывать в объявление или куда вам там надо)
<div id="slider" style="position: absolute">
<ul id="navigation" class="tabs">
<li><div><img src="-" title="---"></div></li>
<li><div><img src="-" title="---"></div></li>
<li><div><img src="-" title="---"></div></li>
<li><div><img src="-" title="---"></div></li>
<li><div><img src="-" title="---"></div></li>
</ul>
<div class="box visible">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>Соответственно вот это:
<ul id="navigation" class="tabs">
<li><div><img src="-" title="---"></div></li>
<li><div><img src="-" title="---"></div></li>
<li><div><img src="-" title="---"></div></li>
<li><div><img src="-" title="---"></div></li>
<li><div><img src="-" title="---"></div></li>
</ul>
Столбик иконок, где в src мы ставим адрес иконок, а в title - выплывающие подсказки.
Ну а это
<div class="box">
Тут внутри наш контент...
</div>
блок для контента.
Наконец, CSS:
#slider{
display: block;
overflow: hidden !important;
width: 595px;
margin-top: 25px;
}
.box {
width: 460px;
left: -750px;
background-color:#cadcde;
border:1px solid #58757b;
min-height: 130px;
padding: 15px;
display: none;
z-index: 100;
}
.visible {display: block}
ul#navigation {
position: absolute;
list-style: none;
z-index:99;
width: 60px;
}
ul#navigation li {
width: 50px;
margin-bottom: 10px;
}
ul#navigation li div {
display: block;
margin-left: -2px;
width: 50px;
height: 23px;
text-align: center;
border-left: none;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
cursor: default;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}Для наглядности оставляю стиль своей таблицы, вы потом поменяете, как вам будет удобно.
