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

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

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

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

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

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

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

function index() {
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, и так далее.

function index() {
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 раза уменьшить количество строк. Смотрим следующий рабочий пример. Однако это ещё не идеал.

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

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

function index(n) {
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 рублей).

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

Подпишитесь на обновления блога

Получить в подарок мини-книги и 21-дневный тренинг по личностному росту.

Подписаться на рассылку «Инструменты Интернет для онлайн бизнеса»

Поделиться ссылкой:


Комментарии:

22.10.2009 19:29:46
#1 airsound

Как раз раздумывал, где купон взять. Если не отдал, приму с благодарностью...

Хочу потестировать пару задумок с Адвордсом...

25.10.2009 13:04:12

Купон отправлен на почту. Желаю удачи!

06.01.2010 16:21:12

Ещё на ссылочках табов приделать onclick="this blur();return false;" - тогда будет вообще шикарно :) При клике исчезнет uotline и не будет добавлятся слеш в адрес!

06.01.2010 17:04:43

На ссылочках табов должны быть реальные ссылки. На случай, если javascript отключен.

О таких ссылках я писал здесь: Что делать если JavaScript отключен.

Но всё равно спасибо.

06.01.2010 18:46:20

Never Lex, а реально, у скольких пользователей в процентах отключён JavaScript?) Очень и очень мало...
Но вы правы, при отключённом JS мы осуществим переход по ссылкам, а при включённом сработает this blur();return false;
И ещё в письме на почту мне пришла порезанная ссылка:
http://neverlex.com/cat/programming/java%20script-menu-tabs/#comment1262797483
Т. е. с пробелом.

06.01.2010 18:50:29

Согласен.
Ссылку гляну. Хрень какая-то.

07.03.2010 03:24:32

очень и очень интересное решение, Все видал но такого. Конечно я его применять не буду, но в качестве альтернативного решения, мое почтение и уважение.

09.03.2010 01:10:55
#8 slamm

А такой вопрос, после события onmouseover мы попадаем на выбранную вкладку, после обновления страницы нам показывается первоначальная вкладка, а можно ли сделать так что при выбранной вкладке после обновления страницы она оставалась выбранной.

09.03.2010 06:58:14

slamm, сделать можно всё, что угодно. Можно писать идентификатор выбранной вкладки в куки, например. Но это уже зависит от конкретной задачи.

15.03.2010 19:49:47

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

01.04.2010 15:56:39
#11 Кирилл

Полезные примеры.За пищу для ума спасибо.

08.04.2010 16:29:01
#12 trikadin

Эм... Проходил мимо, увидел вот это: Ещё на ссылочках табов приделать onclick="this blur();return false;" - тогда будет вообще шикарно :) - зачем? Например, усложняется навигация по странице с помощью клавы, а ведь ей ещё пользуются (я, например :).

В общем... Что сказать-то хочу... Ставьте лучше в CSS что-то вроде этого: "a {outline: 0}" - проблема исчезнет (в Firefox точно, других браузеров, ставящих рамочку, не знаю).

P.S. Never Lex, спасибо за сайт, есть много полезного. Только... В движке посмотрите штуку с заменой кавычек на фигурные: могут некорректно отображаться. И ещё: можно сделать так, чтобы при нажатии «Ctrl + ’стрелка» страницы не мотались? Хотя бы при вводе текста - сильно осложняет редактирование написанного.

17.04.2010 14:08:42

О, хороший скриптик. Можно, в принципе, попробовать присобачить к себе на блог :) Спасибо :)

22.04.2010 20:54:43
#14 Тальне

Здравствуйте.
Такой вопрос по Вашему скрипту, вот в Опере можно симулировать отображения сайта в мобильном телефоне (Opera mini like:) Shift+f11). Так вот Ваш скрипт перестает работать в таком режиме и все разваливается, а это критичный момент. Как сделать кроссбраузерность и для мобильного браузера?
Скрипт взял на заметку себе, люблю компактность и простоту решений. Спасибо.

22.04.2010 21:34:28

Тальне, скрипт не разваливается. Разваливается вёрстка. А в данном посте рассматривается именно скрипт.

Если нужно сверстать менюшку, велкам в почту. Договоримся о цене.

23.04.2010 09:19:09
#16 Тальне

Never Lex, спасибо за ответ, сверстать и сам могу, нужто только пнуть в нужную сторону.
З.Ы. Резать ссылку нехорошо, по пузомеркам мой самопис один в один с вашим ;)

23.04.2010 09:21:24

Тальне, а где ссылка на ваш блог? Я не увидел.

Кстати, проверил пример в Opera Mini Simulator. Всё ок, за исключением того, что табы не реагируют при наведении (а разве должны?). Но если кликать по ним, то они нормально переключаются.

17.05.2010 09:58:06
#18 zael

хочу использовать данный метод на своем сайте только чтоб 2 таба и в каждом по 3-10 пунктов, скачал пример, кручу, верчу , а пока не выходит :-( , поможите люди добрые.

18.05.2010 07:51:05
#19 Владимир

Never Lex, можете написать исходник скрипта с CSS, будет проще и понятнее?!

18.05.2010 08:03:30

zael, как именно вам помочь? Написать за вас код? :)

Владимир, CSS можете взять из примера.

21.05.2010 14:47:43
#21 Сергей

вроде работает, при чем неплохоно постатистике интернета около 20% пользователей отключают javascript, а это значит что можно потерять посетителей, если не придумать альтернативу))))))))

21.05.2010 18:21:52

Сергей, статистика странная. Вроде бы не 20, а намного меньше. Но в принципе согласен. Нужно делать приложения, которые будут работать вне зависимости от Жаваскрипта. У меня даже статейка по этому поводу есть :) Что делать если JavaScript отключен

04.06.2010 10:29:51
#23 ktraut

Отключают яваскрипт? Кто, зачем?
Как он хотя бы отключатся? Это не ламерский вопрос, за годы работы-возни с интернетом такой мысли даже в голову не приходило.
Адаптировать сайты под !=яваскрипт всеравно что адаптировать их под ие6. или ие4.

28.06.2010 19:39:27

Хорошая менюшка получилась. Купон уже отдали((Ну лан будем читать мб еще будет)
Мой блог не подойдет для обмена?

18.09.2010 14:52:11

Слышал что гугл не любит такой вид. Правда?

18.09.2010 14:52:47

Evgenii, не правда. Почему бы ему не любить менюшки?

25.01.2011 16:47:13
#27 Лидер

Спасибо за менюшку!
Как мне сделать внешнюю ссылку в таб (вкладка 4, например)??

25.01.2011 17:06:35

Лидер, не понимаю трудностей. Поставить ссылку и всё.

25.01.2011 17:37:32
#29 Лидер

Сам не пойму, вроде просто!
<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;">

что не так?

25.01.2011 20:09:46

Лидер, напишите на почту и ссылочку скиньте. На первый взгляд всё верно.

06.02.2011 20:59:22
#31 Федор Валентинович

Яваскрипт очень красиво, но говорят для сео неочень как-то, особенно в качестве ссылок

28.03.2011 10:17:42
#32 Володя

Cпасибо, пригодится. А по поводу купонов Гугл, не очень понятно: я был зарегистрирован там, но ничего не рекламировал, а купон можно использовать только вновь зарегистрировавшимся.

07.04.2011 13:52:15
#33 Студент

Спасибо, интересное решение, постараюсь использовать для себя.

12.07.2011 11:31:08
#34 Aidar

Хех...Прикольно сделано.

27.08.2011 08:01:11
#35 Новичек

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

19.09.2011 09:05:05

ХМ...а эти ссылки будут индексироваться ведь яндекс не любит ява скрипты

30.10.2011 16:53:14
#37 )

Never Lex я чета не магу сделать посмотрел исходник можешь кинуть исходник css суда или лучше если не трудно в агент кинь мне авторизацию

10.11.2011 11:36:14
#38 Светлана

очень гибкая вещь в принципе... можно под себя на любой вкус подстраивать

08.12.2011 15:06:19

А я JS почти не использую, не люблю обременять код... Хотя надо бы начинать пробовать ! Интересный у вас Двиг. слышал что сами писали, не пробовали зарекомендовать его ;) неплохой трафф был бы, возможно и прибыль смотря как подойти !

08.12.2011 15:08:19

Саня, я движки другие буду продвигать. Этот трогать пока не буду :)

24.01.2012 13:32:10
#41 Ином

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

20.07.2012 07:27:34
#42 Джейк

Да, без java скрипта сейчас никуда.

28.02.2013 16:56:08
#43 Наталья

Спасибо автору за скрипт! Все просто и работает хорошо.

16.04.2013 05:43:07

Давно делал так.

Оставьте комментарий [форматирование]

Пожалуйста, воздержитесь от спама и идиотских высказываний. Жёсткая модерация. Ссылки закрыты атрибутом nofollow, а значит не несут пользы для продвижения!
Ссылки на всё кроме личных блогов и тематических блогов, сходных по тематике с данным, вырезаются.



Мой RSS фид