Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Фишки и примочки » Вертикальные выезжающие контейнеры


Вертикальные выезжающие контейнеры

Сообщений 1 страница 5 из 5

1

Скрипт не мой, где-то я его утащила и переделала. Где - не помню. Прелесть в том, что в свернутом состоянии это всего лишь столбик иконок, который занимает совсем мало места.

Никто мне не осудит, если в качестве демо выложу ссылку на свой форум? Демо смотреть в объявлении.

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);
}

Для наглядности оставляю стиль своей таблицы, вы потом поменяете, как вам будет удобно.

+2

2

У меня одного ссылка статична и не нажимается?  о.о"
Если да, то можно кинуть её ещё раз в прямом виде, ибо хочется посмотреть.

0

3

Leona Verctos
Она не статична, там надо просто хорошо прицелиться, чтобы попасть на нее. Нажимайте на слово "объявлении".

0

4

Да, у меня все работает. Просто нужно убедиться, что попал ( то есть, всегда нужно быть трезвым) и (если уже очень хочется наверняка попасть с первого раза) подождать, пока не появится надпись с названием контейнера

На всякий случай: http://adastra.rolevaya.ru/

0

5

Shata
ПокемонкО
Спасибо :3

0


Вы здесь » Кот » Фишки и примочки » Вертикальные выезжающие контейнеры


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC