Blog. Just Blog

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

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

Начнем с проектирования. Нам надо создать в 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". Такой способ позволяет размещать блоки с контентом в произвольном порядке, независимо от порядка следования вкладок.

Теперь добавим стили. Нам надо сделать так, чтобы список был выстроен горизонтально, обозначить неактивные вкладки, выделить активную вкладку, сделать неактивные блоки контента скрытыми и показать активный блок.
  1. /* строка меню */
  2. #menu {
  3.     margin0px;
  4.     padding0px 5px 0px 5px;
  5.     list-stylenone;
  6.     height32px;
  7.     border-bottom2px solid #DDDDDD;
  8.     background#FFFFFF;
  9.     font-familyArial;
  10. }
  11.  
  12. /* вкладка меню */
  13. #menu li {
  14.     floatleft;
  15.     displayinline;
  16.     margin0px 2px -1px 0px;
  17.     padding5px 25px 5px 25px;
  18.     cursorpointer;
  19.     color#999999;
  20.     background#F4F4F4;
  21.     border2px solid #DDDDDD;
  22.     font-weightbold;
  23.     border-radius16 16 0 0;
  24. }
  25.  
  26. /* активная вкладка меню */
  27. .tab_active {
  28.     border-bottom2px solid #FFFFFF !important;
  29.     color#000000 !important;
  30.     background#FFFFFF !important;
  31. }
  32.  
  33. /* контейнер с блоками контента */
  34. #container {
  35.     clearboth;
  36.     border2px solid #DDDDDD;
  37.     border-width0px 2px 2px 2px;
  38.     border-radius0 0 8 8;
  39.     padding5px;
  40. }
  41.  
  42. /* скрытый блок контента */
  43. #container .tab_content {
  44.     displaynone;
  45. }
  46.  
  47. /* видимый блок контента */
  48. .visible {
  49.     displayblock !important;
  50. }
Я сделал еще один вариант стилей, в нем активная вкладка будет "выдвигаться" вверх над остальными неактивными вкладками. Если вам нравится именно такой визуальный эффект, то используйте эту таблицу стилей.
  1. /* строка меню */
  2. #menu {
  3.     margin0px;
  4.     padding0px 5px 0px 5px;
  5.     list-stylenone;
  6.     height32px;
  7.     border-bottom2px solid #DDDDDD;
  8.     background#FFFFFF;
  9.     font-familyArial;
  10.     positionrelative;
  11.     top10px;
  12. }
  13.  
  14. /* вкладка меню */
  15. #menu li {
  16.     floatleft;
  17.     displayinline;
  18.     margin0px 2px -1px 0px;
  19.     padding5px 25px 5px 25px;
  20.     height20px;
  21.     cursorpointer;
  22.     color#999999;
  23.     background#F4F4F4;
  24.     border2px solid #DDDDDD;
  25.     font-weightbold;
  26.     border-radius16 16 0 0;
  27. }
  28.  
  29. /* активная вкладка меню */
  30. .tab_active {
  31.     border-bottom2px solid #FFFFFF !important;
  32.     color#000000 !important;
  33.     background#FFFFFF !important;
  34.     height30px !important;
  35.     positionrelative;
  36.     top: -10px;
  37. }
  38.  
  39. /* контейнер с блоками контента */
  40. #container {
  41.     clearboth;
  42.     border2px solid #DDDDDD;
  43.     border-width0px 2px 2px 2px;
  44.     border-radius0 0 8 8;
  45.     padding5px;
  46. }
  47.  
  48. /* скрытый блок контента */
  49. #container .tab_content {
  50.     displaynone;
  51. }
  52.  
  53. /* видимый блок контента */
  54. .visible {
  55.     displayblock !important;
  56. }
Все сделано без использования изображений, эффекты скругленных уголков вкладок сделаны при помощи CSS3. Если браузер не поддерживает эти эффекты, то вкладки будут иметь обычную прямоугольную форму. Добавим стили в 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. В приведенном примере я использую простой способ.
  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>
Остался, собственно, сам обработчик клика на вкладках. Он будет работать следющим образом. Получив вкладку, на которой был выполнен клик мышкой, обработчик в цикле проходит по всем вкладкам, делает активной выбранную и неактивными все остальные вкладки, и сразу же скрывает или показывает связанные с ними блоки контента. Выглядит это так:
  1. function tab(el) {
  2.     // Получить список вкладок меню
  3.     var menu=el.parentNode;
  4.     var tabs=menu.getElementsByTagName('li');
  5.     for (var i=0i<tabs.lengthi++) {
  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).

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 12039 | Комментариев: 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 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0031 сек.) / Память: 4.5 Mb
Наверх