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

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

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

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

Рис. 2. Пример вкладок, созданных с помощью стилей

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

Потребуется всего два селектора, один изменяет стиль текущей вкладки, назовем его open, а второй селектор с именем close будет управлять видом неактивной вкладки. Рамка создается с помощью атрибута border, он позволяет одновременно задать стиль рамки, ее толщину и цвет. Чтобы не образовывалась двойная рамка в местах состыковки ячеек, следует границу справа убрать. Для этого используется параметр border-right: none. Для текущей вкладки (селектор open) следует спрятать также и нижнюю границу. Стиль самой правой и левой ячеек можно описать прямо в теге TD, но при частом использовании вкладок на сайте, лучше создать отдельный класс.

Использование таблицы имеет несколько преимуществ. При изменении размеров окна, таблица подстраивается под его ширину, поэтому вкладки всегда будут видны и размещаться строго по горизонтали. Впрочем, можно отказаться от таблицы и воспользоваться тегами SPAN или DIV. Но в этом случае возможно появление искажений при уменьшении окна браузера. В примере 2 применяется тег SPAN, с помощью которого создаются вкладки. Чтобы не возникало смещения блоков относительно друг друга, лучше писать код одной строкой.

Применяя разные рамки и цвет заливки можно создать вкладки самого разнообразного вида. На рис. 3 показан пример инвертирования вкладок, в этом случае активная вкладка выделяется цветом, а остальные — нет.

Рис. 3. Пример инвертированных вкладок

В примере 3 приведен код создания подобных вкладок. В данном случае опять применяется таблица.

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