Создание выдвижных вкладок на JavaScript

Рассмотрим, как можно создать выдвижные вкладки на JavaScript, которые выдвигались бы при клике мышью по заголовку вкладки. На таких вкладках можно размещать различную дополнительную информацию. Пример можно посмотреть на странице "выдвижные вкладки".
Для создания выдвижных вкладок нам нужно будет использовать свойство каскадных таблиц стилей для блоков overflow со значением hidden и свойства относительного и абсолютного позиционирования. Так если указать для блока div свойство overflow со значением hidden, то содержимое, выходящее за границы данного блока, не будет отображено и размеры блока изменены не будут, не будут отображены и полосы прокрутки содержимого. То есть нужно будет менять координаты абсолютно позиционированных блоков вкладок относительно блока со стилевым свойством overflow:hidden.
Для начала создадим блок div (с именем класса "block_inset") с высотой равной высоте заголовков вкладок, в этом блоке поместим блок (с именем класса "inset_pole") со стилевым свойством overflow:hidden , в котором и будут перемещаться блоки вкладок. Приведу полностью HTML-код страницы, в котором наши вкладки будут находиться под блоком меню сайта.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Вкладки</title>
<style type="text/css">

body { margin:0px; padding:0px; }
.menu { background:#7BB9FD; padding:5px; }
.text_site { padding:10px; }
/* свойства вкладок */
.block_inset { position:relative; height:30px; }
.inset_pole { overflow:hidden; width:100%; height:300px; position:absolute; left:0px; top:0px; }
.inset_num { position:absolute; background:#80FFFF; width:200px; height:150px;
top:-120px; }
.inset_header { position:absolute; bottom:0px; left:0px; width:100%;
cursor:pointer; text-align:center; background:#00FF40; height:30px; }
.inset_header div { padding:5px; }
.inset_kontent { padding:10px; height:120px; background:#408080; color:#eee; }

/* вкладки */
#inset_num1 { left:10px; }
#inset_num2 { left:220px; }
#inset_num3 { left:430px; }

</style>
</head>
<body>
<h1>Заголовок сайта</h1>
<div class="menu">
меню
</div>
<div class="block_inset">
<div class="inset_pole" id="inset_pole1">

<div class="inset_num" id="inset_num1">
<div class="inset_kontent">Содержимое вкладки</div>
<div class="inset_header" id="inset_header1" onClick="click_header_inset(1);" ><div>Вкладка</div></div>
</div>

<div class="inset_num" id="inset_num2">
<div class="inset_kontent">Содержимое вкладки</div>
<div class="inset_header" id="inset_header2" onClick="click_header_inset(2);" ><div>Вкладка</div></div>
</div>

<div class="inset_num" id="inset_num3">
<div class="inset_kontent">Содержимое вкладки</div>
<div class="inset_header" id="inset_header3" onClick="click_header_inset(3);" ><div>Вкладка</div></div>
</div>

<!-- тут пишем HTML-код следующих вкладок (если нужно конечно) -->

</div>
</div>

<div class="text_site">
Основной текст сайта
</div>
</body>
</html>

 

Для добавления вкладок в соответствующем месте нужно прописать HTML-код

 

Код
<div class="inset_num" id="inset_numN">
<div class="inset_kontent">Содержимое вкладки</div>
<div class="inset_header" id="inset_headerN" onClick="click_header_inset(N);"><div>Вкладка</div></div>
</div>

и нужно прописать в каскадных таблицах стилей положение нового блока вкладки в блоке "inset_pole"
Код
#inset_numN { left: новое_расстояние px; }

 

где вместо N нужно прописать номер вкладки, он недолжен повторяться.
Щелчок клавишей мыши по заголовку вкладки будем перехватывать обработчиком события onClick, указав ему функцию click_header_inset(номер_вкладки). Теперь давайте определимся, как должны работать вкладки.
  1. Вкладка должна плавно отрыться после щелчка мышью по заголовку;
  2. Если есть открытая какая-либо другая вкладка, то она должна плавно закрыться, а потом отрыться нужная;
  3. После щелчка мышью по отрытой вкладке, она должна плавно закрыться.

Получим следующий код

 

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Вкладки</title>
<style type="text/css">

body { margin:0px; padding:0px; }
.menu { background:#7BB9FD; padding:5px; }
.text_site { padding:10px; }
/* свойства вкладок */
.block_inset { position:relative; height:30px; }
.inset_pole { overflow:hidden; width:100%; height:300px;
position:absolute; left:0px; top:0px; }
.inset_num { position:absolute; background:#80FFFF; width:200px; height:150px;
top:-120px; }
.inset_header { position:absolute; bottom:0px; left:0px; width:100%;
cursor:pointer; text-align:center; background:#00FF40; height:30px; }
.inset_header div { padding:5px; }
.inset_kontent { padding:10px; height:120px; background:#408080; color:#eee; }

/* вкладки */
#inset_num1 { left:10px; }
#inset_num2 { left:220px; }
#inset_num3 { left:430px; }

</style>
</head>
<body>
<h1>Заголовок сайта</h1>
<div class="menu">
меню
</div>
<div class="block_inset">
<div class="inset_pole" id="inset_pole1">

<div class="inset_num" id="inset_num1">
<div class="inset_kontent">Содержимое вкладки</div>
<div class="inset_header" id="inset_header1" onClick="click_header_inset(1);" ><div>Вкладка</div></div>
</div>

<div class="inset_num" id="inset_num2">
<div class="inset_kontent">
Содержимое вкладки
</div>
<div class="inset_header" id="inset_header2" onClick="click_header_inset(2);" ><div>Вкладка</div></div>
</div>

<div class="inset_num" id="inset_num3">
<div class="inset_kontent">
Содержимое вкладки</div>
<div class="inset_header" id="inset_header3" onClick="click_header_inset(3);" ><div>Вкладка</div></div>
</div>

</div>
</div>

<div class="text_site">
Основной текст сайта
</div>

<script type="text/javascript">

num_inset_motor=0;
flag_inset_motor=0;
time_pause_motor=1;//задержка между перемещениями в миллисекундах
delta_y=3;//величина перемещения вкладки
set_motor=false;
id_settimeout=0;
open_inset_num=0;
next_open_num=0;
height_header=30;//высота заголовка вкладки

function click_header_inset(n_inset)
{

if (!set_motor)
{
next_open_num=0;
if (open_inset_num==0)
{
num_inset_motor=n_inset;
flag_inset_motor=1;
set_motor=true;
motor_inset();
}
else
{
if (n_inset!=open_inset_num) next_open_num=n_inset;
num_inset_motor=open_inset_num;
flag_inset_motor=-1;
set_motor=true;
motor_inset();

}
}
else
{
clearTimeout(id_settimeout);
if (n_inset==num_inset_motor)
{
flag_inset_motor*=-1;
motor_inset();
}
else
{
next_open_num=n_inset;
if (flag_inset_motor>0)
{
flag_inset_motor=-1;

}
motor_inset();
}
}
}

function motor_inset()
{
if (num_inset_motor==0) return;
if (flag_inset_motor==0) return;
obj_name="inset_num"+num_inset_motor;
obj_inset=document.getElementById(obj_name);
y_inset_motor=obj_inset.offsetTop;

y_inset_motor+=flag_inset_motor*delta_y;

if (flag_inset_motor>0)
{
if (y_inset_motor>0)//вкладка отрыта
{
y_inset_motor=0;
set_motor=false;
open_inset_num=num_inset_motor;
}
}
else
{
if (y_inset_motor<=height_header-obj_inset.offsetHeight)//вкладка закрыта
{
y_inset_motor=height_header-obj_inset.offsetHeight;
set_motor=false;
open_inset_num=0;
if (next_open_num>0)
{

num_inset_motor=next_open_num;
next_open_num=0;
flag_inset_motor=1;
set_motor=true;

}
}

}
obj_inset.style.top=y_inset_motor+"px";

if (set_motor)
{
id_settimeout=setTimeout("motor_inset()",time_pause_motor);
}

}

</script>

</body>
</html>

 

Функция click_header_inset() определяет, по какой вкладке произошел щелчок клавиши мыши и задает дальнейшие действия скрипта. Функция motor_inset() перемещает заданную вкладку в нужном направлении. Задается скорость перемещения вкладок переменными time_pause_motor и delta_y.
Опубликовано 05 ноября 2008 г.
Комментарии к публикации
Всего комментариев: 16
прохожий: Гость | 28.01.2009, 22:43 #
Интересный эффект. Большое спасибо!
пользователь: | 12.02.2009, 03:59 #
Прикольно! Спасиб.
прохожий: gps | 18.07.2009, 08:16 #
сайт: navstar-gps.ru/
Отлично спасибо
прохожий: Гость | 01.10.2009, 23:21 #
в старом эксплорере не очень хорошо работает - мерцает.
Суперадмин: | 03.10.2009, 20:53 #
А зачем использовать старый эксплорер? :)
прохожий: Гость | 02.02.2010, 03:25 #
Хотела бы, чтобы высота выезжающего списка не была фиксированной, чтобы измерялась в зависимости от объема написанного
прохожий: Алексей | 12.04.2010, 10:20 #
Дмитрий подскажите, а лучше напишите на своем сайте уроки как сделать такую же форму как у Вас (интересна не форма а код JavaScript) нажимаешь на ссылку "Добавить коментарий" появляется форма, нажимаешь "Закрыть" форма исчезает. И еще урок как сделать модальное окно с полупрозрачным цветом и определенным размером.
Суперадмин: | 14.04.2010, 07:52 #
Алексей, как только появится время напишу. Но не понял я, что за модальное окно с полупрозрачным цветом?
прохожий: vseocomputere | 02.06.2011, 06:13 #
Ну ща проверим, твое творение
прохожий: Сергей | 12.09.2011, 23:09 #
сайт: region35.net
Дополнительное меню, спасибо, забрал в коллекцию...
прохожий: Антон | 23.09.2011, 21:09 #
E-mail: написать сообщение
сайт: greydog.ru
То есть если этот код внедрять в CMS, нужно просто вместо Содержимое вкладки прописать к примеру в dle {tags}
Суперадмин: | 26.09.2011, 21:24 #
Нет, просто прописать {tags} не получится. Читайте внимательно статью, и делайте как написано.
прохожий: Дмитрий | 15.11.2011, 20:25 #
E-mail: написать сообщение
Скрипт в коллекции. Спасибо!
А всё-таки: высоту содержимого контента можно сделать динамической в зависимости от количества элементов контента?
Очень бы хотелось! В Javascript вообще профан.
прохожий: Дмитрий | 16.11.2011, 06:00 #
E-mail: написать сообщение
Парился, парился с этим javascript-ом, а оказалось всё просто:
1. В строке стилей .inset_header меняем position:relative;.
2. В строке стилей .inset_num меняем header:auto; top:-140px;.
3. В строке стилей .inset_kontent добавляем overflow:auto;.
Ву-а-ля! Контент теперь изменяемый!
прохожий: air-eco | 17.11.2011, 19:34 #
сайт: air-eco.ru/
Спасибо! получилось, вообще круть!!
прохожий: Viktor | 08.04.2015, 19:49 #
Как сюда прикрутить куки , чтобы запоминалось положение панелей
Вход в аккаунт
Партнеры сайта
Купить внешнюю антенну здесь.
Новости сайта