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