Функциональное javascript меню на основе вкладок (табов)

Перепечатка хорошего поста из старого блога.
Ленивые могут читать только выделенное.

Рисовал не так давно сайт для Черниговского автосалона и невольно озадачился парочкой интересных решений на основе javascript. Об одном из них пойдёт речь в этой заметке. Другое имеет полное право быть выделено как отдельный пост, так как решает свои специфические задачи. Позволим же ему воспользоваться этим правом в полной мере (вскоре заметка будет опубликована на этом блоге).

Итак, пойдёт разговор сегодня о такой красивости, как вкладки или табы. А точнее о меню на их основе. Цель – написать наипростейший код, выполняющий полностью поставленные перед ним задачи. Конечно, скрипт обязан быть максимально кратким и надёжным. Там, где можно написать 1 строку не стоит городить десяток, что довольно часто можно наблюдать даже на сайтах, сделанных «крутыми» сайтостроительными конторами. И естественно, понимать его обязаны все более менее вменяемые браузеры.

Поехали. Вначале мной было подсмотрено решение для вкладок у ForSimple (мне оно показалось наиболее простым), а также изучено пару решений от Мастера Gordi. Были также изрядно истоптаны тропинки поисковиков по нужным запросам, однако ничего интересного найти не удалось.

Смысл нашего скриптика в том, чтобы при запуске функции нужные вкладки выделялись (остальные при этом должны быть не выделены), а также пользователю показывается нужный слой с подменюшкой (остальные в это время обязаны быть скрыты). Выделить/снять выделение и скрыть/показать элемент просто. Это делается путём назначения стилей CSS и функции javascript getElementById.

С помощью простейшей конструкции мы можем выполнить нашу задачу.

В принципе этого скрипта уже достаточно для выполнения нашей задачи. Он будет нормально работать, причём в любом браузере. Смотрим рабочий пример на 4 вкладки. Единственные его минусы - размер и громоздкость. Ведь если вкладок довольно много, величина скрипта становится значительной. При четырёх табах каждая вкладка описывается с помощью восьми строк. Естественно, такое положение вещей не могло устроить меня, так как одним из моих принципов в вёрстке и разработке является минимализм. И я пошёл дальше.

Порывшись ещё немного в Гугле, удалось написать упрощённый вариант скрипта. Его главное отличие от предыдущего – наличие цикла. Обязательное правило: вкладкам и слоям должны быть выданы соответствующие айдишники. То есть, первый таб – tab1, первый слой – cont1, и так далее.

Итого получилось четыре короткие функции (по количеству вкладок). Уже неплохо. Оптимизация налицо, ведь удалось в 2 раза уменьшить количество строк. Смотрим следующий рабочий пример. Однако это ещё не идеал.

Конечно, сократить функцию уже вряд ли получится. Зато можно сократить количество функций. В идеале нужно делать все операции с помощью одной небольшой функции, а их пока целых четыре. Далее всё очень просто. Нужно всего лишь задаться вопросом, что является исходными данными для скрипта и можем ли мы их передавать динамически. А вводной служит всего лишь одна цифра – айдишник (таба и слоя), и передавать его мы не только можем, но и обязаны, если не хотим расписывать энное количество лишних строк скрипта.

Получаем на выходе простейшее решение:

Последний рабочий пример можно лицезреть по линку.

Итого: имеем универсальное простое решение для реализации сложной динамической менюшки с использованием вкладок. Причём работает оно в любом браузере (естественно, при включённом javascript).

Кстати, хотел бы заметить, что активировать скрипт можно как угодно (по клику или наведению). Мне нравится больше вариант с onmouseover. Ведь в результате получаем меню, которое реагирует на наведение курсора, однако в ссылке вкладки всё равно стоит линк. Так, даже при выключенном жаваскрипте пользователь сможет перейти по ссылке меню.

P.S. Продолжаю меняться постовыми с хорошими блогами. Например, вот блог под названием «Интернет работа» предлагает добротную статью о том, как выбрать хостинг. Большая и серьёзная статья на тему, которая терзает многих интернет-предпринимателей, блоггеров и манимейкеров. Лично я уже решил для себя, что мои проекты будут жить на своём ВДС у серьёзной компании.

Ищу блоги, которые меняются постовыми. Если знаете, пишите в мыло или в комментарии. Всяческие списки и поиск в Гугле дают кучу мусора (много кто давно уже не меняется ссылками, некоторые блоги вообще исчезли, закрылись, перестали обновляться), потому и спрашиваю у вас.

А пока напишу о тех, кто сейчас меняется постовыми. Это Уфимский сео-бомж (прошлая ссылка ведёт прямиком на его блог) и блог под названием MONEY-VSEM.COM (ещё один блог о заработке. Ведёт некий merlin).

Кстати, кому-нибудь нужен купон на 1400 рублей для пробного использования Google AdWords? ;) Его можно использовать в новых аккаунтах Google AdWords. После создания аккаунта номер купона нужно указать на странице «Оплата» - «Настройки платежных данных» и активировать аккаунт первым платежом (минимальный платеж 400 рублей).

Отдам купон первому, кто попросит. Полная халява. Ничего не прошу взамен.

Понравилась заметка? Можно подписаться на RSS ленту комментариев к заметке или ретвитнуть её. Также можно заглянуть на страницу Обновлений блога.