Статьи

Навигация с вкладками: примеры и скрипты

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

Что такое навигация с вкладками?

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

Японский агрегатор новостей

JapanNEws

Стиль вкладок варьируется от квадратичных угловых вкладок, таких как 23 и Me, до более сложных закругленных углов со скосами, штрихами и внутренними вкладками, такими как на сайте Color Therapy by Filter .

23andMe

23 и я вкладки

ColorTherapy

Цветотерапия по фильтру

Вот еще несколько примеров навигации по вкладкам в действии:

UCSAA использует красочный вертикальный набор вкладок.

UCSAA

Сайт Берта Тиммермана имеет несколько текстурированных вкладок в форме стрелки.

BertTimmermans

Vyniknite использует большие вкладки в своей основной области содержимого.

vynykite

Какое милое имя использует вариацию на квадратных вкладках.

любимое имя

Komodo Media имеет боковую панель навигации с вкладками.

Комодо

Навигация с помощью вкладок Veer передает ощущение глубины, используя вкладки разных цветов с примененными тенями.

травить

Threadless Kids использует ролловеры, которые также меняют изображение в каждом разделе

ThreadlessKids

Навигационные сценарии с вкладками

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

Slidedeck — это очень хорошее слайд-шоу на основе jQuery, в котором используются вертикальные вкладки. Вы можете поместить любой тип содержимого в контейнер и использовать вкладки для навигации. Доступна бесплатная версия «Light», а также коммерческая версия Pro.

Slidedeck

Coda slider — еще один бесплатный слайдер jQuery с вкладками навигации вверху.

CodaSlider

ID Tabs — это простая система меню с вкладками, созданная с помощью jQuery.

IDTabs

D htmlxTabbar — это элемент управления javascript для создания динамических интерфейсов с вкладками, доступный в бесплатной или профессиональной версии.

dhtmlTabber

Вам нравится навигация с вкладками, вы используете ее на своем сайте? Вы видели несколько хороших примеров, которыми вы хотели бы поделиться?