Blog. Just Blog

Горизонтальное меню с вкладками на CSS и JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail 27.04.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Сегодня мы будем делать горизонтальное меню с вкладками для размещения на сайте. Но это не обычное навигационное меню, оно делается немного иначе, это меню для отображения различных блоков информации без перехода на другие страницы. Такое горизонтальное меню используется, например, в интернет-мгазинах, когда на одной странице представлено описание товара, фотографии, какие-нибудь дополнительные характеристики, отзывы посетителей и т.д., и вся эта информация переключается как раз таким меню с вкладками.

Начнем с проектирования. Нам надо создать в HTML-коде меню с названиями вкладок и блоки с содержимым, которые соответствуют той или иной выбранной вкладке.
Code (HTML) : Убрать нумерацию
  1. <!-- меню с вкладками -->
  2. <ul id="menu">
  3.   <li id="goods">Товар</li>
  4.   <li id="descr">Описание</li>
  5.   <li id="foto">Фотография</li>
  6.   <li id="price">Цена</li>
  7.   <li id="shops">Где купить</li>
  8. </ul>
  9.  
  10. <!-- контейнер со страницами -->
  11. <div id="container">
  12.   <div id="goods_content">Товар</div>
  13.   <div id="price_content">Цена на товар</div>
  14.   <div id="shops_content">Адреса магазинов</div>
  15.   <div id="descr_content">Описание</div>
  16.   <div id="foto_content">Фотографии</div>
  17. </div>
Связь между вкладками и блоками с содержимым выполняется через их атрибут id, для связанных блоков этот атрибут формируется из id вкладки путем добавления к нему строки "_content". Такой способ позволяет размещать блоки с контентом в произвольном порядке, независимо от порядка следования вкладок.

Теперь добавим стили. Нам надо сделать так, чтобы список был выстроен горизонтально, обозначить неактивные вкладки, выделить активную вкладку, сделать неактивные блоки контента скрытыми и показать активный блок.
Code: Убрать нумерацию
  1. /* строка меню */
  2. #menu {
  3.     margin: 0px;
  4.     padding: 0px 5px 0px 5px;
  5.     list-style: none;
  6.     height: 32px;
  7.     border-bottom: 2px solid #DDDDDD;
  8.     background: #FFFFFF;
  9.     font-family: Arial;
  10. }
  11.  
  12. /* вкладка меню */
  13. #menu li {
  14.     float: left;
  15.     display: inline;
  16.     margin: 0px 2px -1px 0px;
  17.     padding: 5px 25px 5px 25px;
  18.     cursor: pointer;
  19.     color: #999999;
  20.     background: #F4F4F4;
  21.     border: 2px solid #DDDDDD;
  22.     font-weight: bold;
  23.     border-radius: 16 16 0 0;
  24. }
  25.  
  26. /* активная вкладка меню */
  27. .tab_active {
  28.     border-bottom: 2px solid #FFFFFF !important;
  29.     color: #000000 !important;
  30.     background: #FFFFFF !important;
  31. }
  32.  
  33. /* контейнер с блоками контента */
  34. #container {
  35.     clear: both;
  36.     border: 2px solid #DDDDDD;
  37.     border-width: 0px 2px 2px 2px;
  38.     border-radius: 0 0 8 8;
  39.     padding: 5px;
  40. }
  41.  
  42. /* скрытый блок контента */
  43. #container .tab_content {
  44.     display: none;
  45. }
  46.  
  47. /* видимый блок контента */
  48. .visible {
  49.     display: block !important;
  50. }
Я сделал еще один вариант стилей, в нем активная вкладка будет "выдвигаться" вверх над остальными неактивными вкладками. Если вам нравится именно такой визуальный эффект, то используйте эту таблицу стилей.
Code: Убрать нумерацию
  1. /* строка меню */
  2. #menu {
  3.     margin: 0px;
  4.     padding: 0px 5px 0px 5px;
  5.     list-style: none;
  6.     height: 32px;
  7.     border-bottom: 2px solid #DDDDDD;
  8.     background: #FFFFFF;
  9.     font-family: Arial;
  10.     position: relative;
  11.     top: 10px;
  12. }
  13.  
  14. /* вкладка меню */
  15. #menu li {
  16.     float: left;
  17.     display: inline;
  18.     margin: 0px 2px -1px 0px;
  19.     padding: 5px 25px 5px 25px;
  20.     height: 20px;
  21.     cursor: pointer;
  22.     color: #999999;
  23.     background: #F4F4F4;
  24.     border: 2px solid #DDDDDD;
  25.     font-weight: bold;
  26.     border-radius: 16 16 0 0;
  27. }
  28.  
  29. /* активная вкладка меню */
  30. .tab_active {
  31.     border-bottom: 2px solid #FFFFFF !important;
  32.     color: #000000 !important;
  33.     background: #FFFFFF !important;
  34.     height: 30px !important;
  35.     position: relative;
  36.     top: -10px;
  37. }
  38.  
  39. /* контейнер с блоками контента */
  40. #container {
  41.     clear: both;
  42.     border: 2px solid #DDDDDD;
  43.     border-width: 0px 2px 2px 2px;
  44.     border-radius: 0 0 8 8;
  45.     padding: 5px;
  46. }
  47.  
  48. /* скрытый блок контента */
  49. #container .tab_content {
  50.     display: none;
  51. }
  52.  
  53. /* видимый блок контента */
  54. .visible {
  55.     display: block !important;
  56. }
Все сделано без использования изображений, эффекты скругленных уголков вкладок сделаны при помощи CSS3. Если браузер не поддерживает эти эффекты, то вкладки будут иметь обычную прямоугольную форму. Добавим стили в HTML-страницу. У нас будет активной первая вкладка и видимым соответствующий ей первый блок с контентом.
Code (HTML) : Убрать нумерацию
  1. <!-- меню с вкладками -->
  2. <ul id="menu">
  3.   <li id="goods" class="tab_active">Товар</li>
  4.   <li id="descr">Описание</li>
  5.   <li id="foto">Фотография</li>
  6.   <li id="price">Цена</li>
  7.   <li id="shops">Где купить</li>
  8. </ul>
  9.  
  10. <!-- контейнер со страницами -->
  11. <div id="container">
  12.   <div id="goods_content" class="tab_content visible">Товар</div>
  13.   <div id="price_content" class="tab_content">Цена на товар</div>
  14.   <div id="shops_content" class="tab_content">Адреса магазинов</div>
  15.   <div id="descr_content" class="tab_content">Описание</div>
  16.   <div id="foto_content" class="tab_content">Фотографии</div>
  17. </div>
Осталось "вдохнуть жизнь" в меню при помощи JavaScript. На каждую вкладку надо установить обработчик клика. Можете сделать это по-простому - напрямую в коде, или же по-правильному - через привязку событий элементам DOM. В приведенном примере я использую простой способ.
Code (HTML) : Убрать нумерацию
  1. <!-- меню с вкладками -->
  2. <ul id="menu">
  3.   <li id="goods" class="tab_active" onclick="tab(this);">Товар</li>
  4.   <li id="descr" onclick="tab(this);">Описание</li>
  5.   <li id="foto" onclick="tab(this);">Фотография</li>
  6.   <li id="price" onclick="tab(this);">Цена</li>
  7.   <li id="shops" onclick="tab(this);">Где купить</li>
  8. </ul>
Остался, собственно, сам обработчик клика на вкладках. Он будет работать следющим образом. Получив вкладку, на которой был выполнен клик мышкой, обработчик в цикле проходит по всем вкладкам, делает активной выбранную и неактивными все остальные вкладки, и сразу же скрывает или показывает связанные с ними блоки контента. Выглядит это так:
Code (JavaScript) : Убрать нумерацию
  1. function tab(el) {
  2.     // Получить список вкладок меню
  3.     var menu=el.parentNode;
  4.     var tabs=menu.getElementsByTagName('li');
  5.     for (var i=0; i<tabs.length; i++) {
  6.         // Вкладка
  7.         var tab=tabs[i];
  8.         // Блок контента
  9.         var content=document.getElementById(tab.id+'_content');
  10.         // Это вкладка на которой кликнули мышкой
  11.         if (tab.id==el.id) {
  12.             // Сделать вкладку активной
  13.             tab.className='tab_active';
  14.             // Показать связанный с ней блок контента
  15.             if (content) {
  16.                 content.className='tab_content visible';
  17.             }
  18.         }
  19.         else {
  20.             // Сделать вкладку неактивной
  21.             tab.className='';
  22.             // Скрыть связанный с ней блок контента
  23.             if (content) {
  24.                 content.className='tab_content';
  25.             }
  26.         }
  27.     }
  28. }
Осталось собрать все это вместе на странице. Рабочие примеры горизонтальных меню из этой статьи вы можете посмотреть здесь (вариант 1) и здесь (вариант 2).

Поделиться ссылкой ВКонтакте
Просмотров: 16554 | Комментариев: 15

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Сергей (25.12.2013 в 16:50):
Решил наконец то! У кого будет такая же проблема, как у меня (контент на каждой вкладке ниже и ниже) делаем так, все DIVы с контентом просто ставим друг за другом, то есть сплошным кодом, а не с новой строки...
Измучался уже с этой проблемой, но решение оказалось банальней некуда! Бывает...
Сергей (25.12.2013 в 16:10):
В фаербаге всё работает, на другом блоге тоже, видимо ошибка в стилях самого блога где-то ((
ManHunter (25.12.2013 в 15:14):
На демо-странице же все работает. Открывай в фаербаге сводный стиль, ищи откуда берется отступ.
Сергей (25.12.2013 в 14:48):
Нужна помощь по данному меню, установил - всё работает прекрасно, но есть одна заковыка, на каждой последующей вкладке контент сдвигается всё ниже и ниже и на последней вкладке отрыв от топа очень большой, никакие марджины с паддингами не помогают! Не подскажете как сделать, чтобы контент на каждой вкладке начинался с одного и того же места (10 пикселей от вкладок)?
ManHunter (14.09.2013 в 19:45):
Может быть сперва стоило бы выяснить, что делает та или иная технология и зачем они нужны? И да, тут нет ни строчки на Java.
Михаил (14.09.2013 в 19:18):
Спасибо, а сделать ее только на css или на php можно? Без Java.
ManHunter (09.07.2013 в 07:29):
Генерировать меню на сервере при отрисовке страницы и подставлять нужные стили нужным вкладкам.
Павел (09.07.2013 в 01:49):
А если, например, во вкладках ссылки на страницы и при нажатии на любую из сылок идет переход, но выделение вкладки снимается, как можно зафиксировать вкладку, чтобы горела сама вкладка и ссылка во вкладке текущей страницы?
Станислав (29.06.2013 в 07:25):
Спасибо большое с удовольствием воспользуюсь.
Ярослав (18.06.2013 в 18:25):
Спасибо большое за код и знания.
Очень пригодилось.
Лена (13.05.2013 в 17:17):
Это я знаю, спасибо. Буду думать )))
ManHunter (13.05.2013 в 17:09):
Подсказка:
<a href="drugaya_stranica.html">другая страница</a>

Но код для этого надо не "подправить", а целиком переписывать.
Лена (13.05.2013 в 17:08):
Подскажите, пожалуйста, как поправить код, чтобы при клике загружалось содержимое другой страницу, то есть сделать ссылку. Спасибо!
Isaev (03.05.2013 в 14:45):
Какая приятная менюшка... и главное всё на 1 страничке )
Михаил (29.04.2013 в 11:20):
Спасибо за Знания

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (32), AJAX (5), Assembler (372), COM (42), CSS (44), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (53), iconBIT (4), JavaScript (76), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (67), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (20), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (126), выпечка (30), выставки (120), генератор ПСЧ (10), графика (122), десерты (31), Египет (9), заготовки на зиму (47), закуска (22), закуска к пиву (25), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (322), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (82), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (51), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (131), полезные функции (42), прохождения (4), процессы (25), птица (22), путешествия (26), распаковка (22), реверсинг (52), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (37), система (179), Сокольники (8), соусы (16), супы (14), телефоны (10), Тунис (6), умный дом (14), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (17), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,692 раза
<< 2024 - ДЕКАБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
День памяти крымчаков и евреев Крыма – жертв нацизма
Международный день танго
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0082 сек.) / Память: 4.5 Mb
Наверх