Функциональное 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. Ведь в результате получаем меню, которое реагирует на наведение курсора, однако в ссылке вкладки всё равно стоит линк. Так, даже при выключенном жаваскрипте пользователь сможет перейти по ссылке меню.
P.S. Продолжаю меняться постовыми с хорошими блогами. Например, вот блог под названием «Интернет работа» предлагает добротную статью о том, как выбрать хостинг. Большая и серьёзная статья на тему, которая терзает многих интернет-предпринимателей, блоггеров и манимейкеров. Лично я уже решил для себя, что мои проекты будут жить на своём ВДС у серьёзной компании.
Ищу блоги, которые меняются постовыми. Если знаете, пишите в мыло или в комментарии. Всяческие списки и поиск в Гугле дают кучу мусора (много кто давно уже не меняется ссылками, некоторые блоги вообще исчезли, закрылись, перестали обновляться), потому и спрашиваю у вас.
А пока напишу о тех, кто сейчас меняется постовыми. Это Уфимский сео-бомж (прошлая ссылка ведёт прямиком на его блог) и блог под названием MONEY-VSEM.COM (ещё один блог о заработке. Ведёт некий merlin).
Кстати, кому-нибудь нужен купон на 1400 рублей для пробного использования Google AdWords? ;) Его можно использовать в новых аккаунтах Google AdWords. После создания аккаунта номер купона нужно указать на странице «Оплата» - «Настройки платежных данных» и активировать аккаунт первым платежом (минимальный платеж 400 рублей).
Отдам купон первому, кто попросит. Полная халява. Ничего не прошу взамен.
Комментарии:
Ещё на ссылочках табов приделать onclick="this blur();return false;" - тогда будет вообще шикарно :) При клике исчезнет uotline и не будет добавлятся слеш в адрес!
Never Lex, а реально, у скольких пользователей в процентах отключён JavaScript?) Очень и очень мало...
Но вы правы, при отключённом JS мы осуществим переход по ссылкам, а при включённом сработает this blur();return false;
И ещё в письме на почту мне пришла порезанная ссылка:
http://neverlex.com/cat/programming/java%20script-menu-tabs/#comment1262797483
Т. е. с пробелом.
очень и очень интересное решение, Все видал но такого. Конечно я его применять не буду, но в качестве альтернативного решения, мое почтение и уважение.
А такой вопрос, после события onmouseover мы попадаем на выбранную вкладку, после обновления страницы нам показывается первоначальная вкладка, а можно ли сделать так что при выбранной вкладке после обновления страницы она оставалась выбранной.
Привет. Хотел начать изучать яваскрипт, ибо он мне ближе по духу. Посмотрел твои вкладки, выглядет просто и легко. Если ты рисуешь сайты, не будет ли времени взглянуть на мой блог, хоть он не сео, и сказать, что лучше сделать можно (ну пара советов, если не сложно).
Тебя периодически читаю.
Эм... Проходил мимо, увидел вот это: Ещё на ссылочках табов приделать onclick="this blur();return false;" - тогда будет вообще шикарно :) - зачем? Например, усложняется навигация по странице с помощью клавы, а ведь ей ещё пользуются (я, например :).
В общем... Что сказать-то хочу... Ставьте лучше в CSS что-то вроде этого: "a {outline: 0}" - проблема исчезнет (в Firefox точно, других браузеров, ставящих рамочку, не знаю).
P.S. Never Lex, спасибо за сайт, есть много полезного. Только... В движке посмотрите штуку с заменой кавычек на фигурные: могут некорректно отображаться. И ещё: можно сделать так, чтобы при нажатии «Ctrl + ’стрелка’» страницы не мотались? Хотя бы при вводе текста - сильно осложняет редактирование написанного.
О, хороший скриптик. Можно, в принципе, попробовать присобачить к себе на блог :) Спасибо :)
Здравствуйте.
Такой вопрос по Вашему скрипту, вот в Опере можно симулировать отображения сайта в мобильном телефоне (Opera mini like:) Shift+f11). Так вот Ваш скрипт перестает работать в таком режиме и все разваливается, а это критичный момент. Как сделать кроссбраузерность и для мобильного браузера?
Скрипт взял на заметку себе, люблю компактность и простоту решений. Спасибо.
хочу использовать данный метод на своем сайте только чтоб 2 таба и в каждом по 3-10 пунктов, скачал пример, кручу, верчу , а пока не выходит :-( , поможите люди добрые.
Never Lex, можете написать исходник скрипта с CSS, будет проще и понятнее?!
вроде работает, при чем неплохоно постатистике интернета около 20% пользователей отключают javascript, а это значит что можно потерять посетителей, если не придумать альтернативу))))))))
Отключают яваскрипт? Кто, зачем?
Как он хотя бы отключатся? Это не ламерский вопрос, за годы работы-возни с интернетом такой мысли даже в голову не приходило.
Адаптировать сайты под !=яваскрипт всеравно что адаптировать их под ие6. или ие4.
Хорошая менюшка получилась. Купон уже отдали((Ну лан будем читать мб еще будет)
Мой блог не подойдет для обмена?
Спасибо за менюшку!
Как мне сделать внешнюю ссылку в таб (вкладка 4, например)??
Сам не пойму, вроде просто!
<a href=menu.php?id=cont4>Вкладка4</a>//вот ссылка на странице
........
<li id="tab5" class="nonsel"><a href="menu.php?id=cont4" onmouseover="index(5);...//меню
.......
<div id="cont4" style="display: none;">
что не так?
Яваскрипт очень красиво, но говорят для сео неочень как-то, особенно в качестве ссылок
Cпасибо, пригодится. А по поводу купонов Гугл, не очень понятно: я был зарегистрирован там, но ничего не рекламировал, а купон можно использовать только вновь зарегистрировавшимся.
Зравствуйте, Я скачал исходный код вашего рабочего примера и попытался запустить его, неполучилось. В чем дело?
ХМ...а эти ссылки будут индексироваться ведь яндекс не любит ява скрипты
Never Lex я чета не магу сделать посмотрел исходник можешь кинуть исходник css суда или лучше если не трудно в агент кинь мне авторизацию
очень гибкая вещь в принципе... можно под себя на любой вкус подстраивать
А я JS почти не использую, не люблю обременять код... Хотя надо бы начинать пробовать ! Интересный у вас Двиг. слышал что сами писали, не пробовали зарекомендовать его ;) неплохой трафф был бы, возможно и прибыль смотря как подойти !
Как раз раздумывал, где купон взять. Если не отдал, приму с благодарностью...
Хочу потестировать пару задумок с Адвордсом...