Создание вкладок

Печать статьи

Читать журнал

Скачать журнал

Автор статьи: Влад Мержевич ©

Сайт Автора: htmlbook.ru

E-mail Автора: Нет

Дата публикации: 13.07.2005

Вкладки один из элементов навигации, любимый как пользователями сайта за их наглядность и очевидность действия, так и дизайнерами за то, что вкладкам можно придавать любой подходящий вид, без потери их функциональности. Вдобавок, этот элемент хорошо выделяется на веб-странице и сразу становится понятно, что вкладки нужны для перехода между разделами сайта. На рис. 1 показан один из возможных вариантов создания вкладок.

Рис. 1 Вариант создания и размещения вкладок

Создать графические вкладки можно в любом подходящем графическом редакторе. Ссылки делаются либо с помощью карт-изображений, либо разрезанием одной картинки на фрагменты. Мы, однако, сделаем вкладки исключительно простыми средствами, через стили, например.

Для создания вкладок потребуется таблица из шести ячеек. Четыре из них образуют сами вкладки, а две крайние ячейки нужны больше для красоты, они формируют горизонтальную линию и служат для отступа от краев.

Потребуется всего два селектора, один изменяет стиль текущей вкладки, назовем его open, а второй селектор с именем close будет управлять видом неактивной вкладки. Рамка создается с помощью атрибута border, он позволяет одновременно задать стиль рамки, ее толщину и цвет. Чтобы не образовывалась двойная рамка в местах состыковки ячеек, следует границу справа убрать. Для этого используется параметр border-right: none. Для текущей вкладки (селектор open) следует спрятать также и нижнюю границу. Стиль самой правой и левой ячеек можно описать прямо в теге TD, но при частом использовании вкладок на сайте, лучше создать отдельный класс.
Пример 1. Использование таблицы
<html>
<head>
<style type="text/css">
.open { /* Активная вкладка */
border: solid 1px black; /* Параметры рамки */
border-right: none; /* Линии справа нет */
border-bottom: none; /* Линии снизу нет */
text-align: center; /* Выравнивание текста по центру вкладки */
font-weight: bold /* Жирное начертание */
}
.close {
border: solid 1px black; /* Параметры рамки */
border-right: none; /* Линии справа нет */
text-align: center; /* Выравнивание текста по центру вкладки */
background: #CFD6D4 /* Цвет фона вкладки */
}
</style>
</head>

<body>
<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr>
<td width=10 align=center style="border-bottom: solid 1px black"> </td>
<td width=25% class=open>Чебурашка</td>
<td width=25% class=close>Крокодил Гена</td>
<td width=25% class=close>Шапокляк</td>
<td width=25% class=close>Крыса Лариса</td>
<td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black"> </td>
</tr>
</table>
</body>
</html>
Использование таблицы имеет несколько преимуществ. При изменении размеров окна, таблица подстраивается под его ширину, поэтому вкладки всегда будут видны и размещаться строго по горизонтали. Впрочем, можно отказаться от таблицы и воспользоваться тегами SPAN или DIV. Но в этом случае возможно появление искажений при уменьшении окна браузера. В примере 2 применяется тег SPAN, с помощью которого создаются вкладки. Чтобы не возникало смещения блоков относительно друг друга, лучше писать код одной строкой.
Пример 2. Использование тега SPAN
<html>
<head>
<style type="text/css">
.open {
border: solid 1px black;
border-right: none;
border-bottom: solid 1px white;
text-align: center;
font-weight: bold;
width: 24%;
padding: 4px
}

.close {
border: solid 1px black;
border-right: none;
text-align: center;
background: #CFD6D4;
width: 24%;
padding: 4px
}
</style>
</head>

<body>

<span style="border-bottom: solid 1px black; width: 10px"> </span><span class=open>Чебурашка</span><span class=close>Крокодил Гена</span><span class=close>Шапокляк</span><span class=close>Крыса Лариса</span><span style="border-left: solid 1px black; border-bottom: solid 1px black; width: 10px; padding: 4px"> </span>

</body>
</html>
Применяя разные рамки и цвет заливки можно создать вкладки самого разнообразного вида.

В примере 3 приведен код создания подобных вкладок. В данном случае опять применяется таблица.
Пример 3. Создание вкладок через таблицу
<html>
<head>
<style type="text/css">
.open {
border: solid 1px black;
border-right: none;
border-bottom: none;
font-weight: bold;
text-align: center;
background: #CFD6D4;
padding: 4px
}

.close {
border: solid 1px black;
border-right: none;
text-align: center;
padding: 4px
}
</style>
</head>

<body>
<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr>
<td width=10 align=center style="border-bottom: solid 1px black"> </td>
<td width=25% class=open>Чебурашка</td>
<td width=25% class=close>Крокодил Гена</td>
<td width=25% class=close>Шапокляк</td>
<td width=25% class=close>Крыса Лариса</td>
<td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black"> </td>
</tr>
<tr>
<td bgcolor="#CFD6D4" colspan="6" height=10></td>
</tr>
</table>

</body>
</html>
Таблица имеет почти тот же вид, что и в примере 1, добавляется только новая строка, которая формирует серую полосу. Ее ширина и цвет меняется через свойства ячейки height и bgcolor.

Список похожих статей