Делаем меню с использованием вкладок с помощью javascript
Рисовал не так давно сайт для Черниговского автосалона и невольно озадачился парочкой интересных решений на основе javascript. Об одном из них пойдёт речь в этой заметке. Другое имеет полное право быть выделено как отдельный пост, так как решает свои специфические задачи. Позволим же ему воспользоваться этим правом в полной мере.
Итак, пойдёт разговор сегодня о такой красивости, как вкладки или табы. А точнее о меню на их основе. Цель – написать наипростейший код, выполняющий полностью поставленные перед ним задачи. Конечно, скрипт обязан быть максимально кратким и надёжным. Там, где можно написать 1 строку не стоит городить десяток, что довольно часто можно наблюдать даже на сайтах, сделанных «крутыми» сайтостроительными конторами. И естественно, понимать его обязаны все более менее вменяемые браузеры.
Поехали. Вначале мной было подсмотрено решение для вкладок у ForSimple (мне оно показалось наиболее простым), а также изучено пару решений от Мастера Gordi. Были также изрядно истоптаны тропинки поисковиков по нужным запросам, однако ничего интерессного найти не удалось.
Смысл нашего скриптика в том, чтобы при запуске функции нужные вкладки выделялись (остальные при этом должны быть невыделены), а также пользователю показывается нужный слой с подменюшкой (остальные в это время обязаны быть скрыты). Выделить/снять выделение и скрыть/показать элемент просто. Это делается путём назначения стилей CSS и функции javascript getElementById.
С помощью простейшей конструкции мы можем выполнить нашу задачу.
document.getElementById('tab1').className='sel';
document.getElementById('cont1').style.display='block';
//выделяем нужный таб и показываем нужный слой
document.getElementById('tab2').className='nonsel';
document.getElementById(‘cont2’).style.display='none';
…
…
//снимаем выделение с остальных табов, а слои скрываем
}
В принципе этого скрипта уже достаточно для выполнения нашей задачи. Он будет нормально работать, причём в любом браузере. Смотрим рабочий пример на 4 вкладки. Единственные его минусы - размер и громоздкость. Ведь если вкладок довольно много, величина скрипта становится значительной. При четырёх табах каждая вкладка описывается с помощью восьми строк. Естественно, такое положение вещей не могло устроить меня, так как одним из моих принципов в вёрстке и разработке является минимализм. И я пошёл дальше.
Порывшись ешё немного в Гугле, удалось написать упрощённый вариант скрипта. Его главное отличие от предыдущего – наличие цикла. Обязательное правило: вкладкам и слоям должны быть выданы соотвествующие айдишники. То есть, первый таб – tab1, первый слой – cont1, и так далее.
for(i=1;i<=4;i++) {
document.getElementById('tab'+i).className='nonsel';
document.getElementById('cont'+i).style.display='none';
}
//снимаем выделение со всех табов, все слои скрываем
document.getElementById('tab1').className='sel';
document.getElementById('cont1').style.display='block';
//выделяем нужный таб и показываем нужный слой
}
Итого получилось четыре короткие функции (по количеству вкладок). Уже неплохо. Оптимизация налицо, ведь удалось в 2 раза уменьшить количество строк. Смотрим следующий рабочий пример. Однако это ещё не идеал.
Конечно, сократить функцию уже врядли получится. Зато можно сократить количество функций. В идеале нужно делать все операции с помощью одной небольшой функции, а их пока целых четыре. Далее всё очень просто. Нужно всего лишь задаться вопросом, что является исходными данными для скрипта и можем ли мы их передавать динамически. А вводной служит всего лишь одна цифра – айдишник (таба и слоя), и передавать его мы не только можем, но и обязаны, если не хотим расписывать энное количество лишних строк скрипта.
Получаем на выходе простейшее решение:
for(i=1;i<=4;i++) {
document.getElementById('tab'+i).className='nonsel';
document.getElementById('cont'+i).style.display='none'
}
//снимаем выделение со всех табов, все слои скрываем
document.getElementById('tab'+n).className='sel';
document.getElementById('cont'+n).style.display='block';
//выделяем нужный таб и показываем нужный слой
}
Последний рабочий пример можно лицезреть по линку.
Итого: имеем универсальное простое решение для реализации сложной динамической менюшки с использованием вкладок. Причём работает оно в любом браузере (естественно, при включённом javascript).
Кстати, хотел бы заметить, что активировать скрипт можно как угодно (по клику или наведению). Мне нравится больше вариант с onmouseover. Ведь в результате получаем меню, которое реагирует на наведение курсора, однако в ссылке вкладки всё равно стоит линк. Так, даже при выключенном жаваскрипте пользователь сможет перейти по ссылке меню.
--------------------
Денис Чекалов продолжает пополнять свой список блогов, авторы которых активно меняются постовыми.
А вы знаете как поднять ТИЦ / Pr сайта, увеличить посещаемость сайта?
Хотите научится продвигать сайт? SEO блог начинающего вам поможет.
Рейтинг популярности заметок:
