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

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

Просмотров: 12753 | Комментариев: 15


Метки: JavaScript, CSS, HTML, оформление сайта

Горизонтальное меню с вкладками на CSS и JavaScript
Сделать активной вкладку #публикации вместо #сообщения
Горизонтальное меню с вкладками на CSS и JavaScript
Как открыть несколько вкладок в браузере Google
Горизонтальное меню с вкладками на CSS и JavaScript
Вкладки (страницы) на одной странице на html/css
Горизонтальное меню с вкладками на CSS и JavaScript
Активность вкладок - C# (си шарп) - Форум
Горизонтальное меню с вкладками на CSS и JavaScript
Как работать с вкладками в браузере
Горизонтальное меню с вкладками на CSS и JavaScript
Динамические вкладки с помощью jQuery
Горизонтальное меню с вкладками на CSS и JavaScript
Горизонтальное меню с вкладками на CSS и JavaScript
Горизонтальное меню с вкладками на CSS и JavaScript
Горизонтальное меню с вкладками на CSS и JavaScript
Горизонтальное меню с вкладками на CSS и JavaScript
Горизонтальное меню с вкладками на CSS и JavaScript
Горизонтальное меню с вкладками на CSS и JavaScript
Горизонтальное меню с вкладками на CSS и JavaScript
Горизонтальное меню с вкладками на CSS и JavaScript