FreeArtists.ruFreeartists информация  о  web-технологиях

Создание меню при помощи CSS и JavaScript

В этой статье мы рассмотрим примеры создания наиболее распространенных типов меню для web-сайтов. Для этого мы будем использовать семантику HTML и возможности CSS и JavaScript (DHTML).

Простое горизонтальное меню

Описание

Это простое горизонтальное меню, с очень коротким и простым кодом.

Возможности

Простая, удобная и красивая навигация на сайте с небольшим количеством разделов.

Принцип работы

Берем маркированный список со ссылками, выстраиваем его в линию и делаем выделение той ссылки, на которую наводят курсор.

Код с комментариями

1. Для начала создадим маркированный список со ссылками внутри:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Contacts</a></li>
</ul>

2. Теперь нам надо выстроить его в линию и заодно убрать маркер, для этого напишем следующие стили:

ul li{
	list-style-type:none;
	display:inline
	}

3. Поскольку мы не можем использовать блочные свойства стилей для inline элементов, сделаем из тега a блочный элемент, а чтобы они выстроились в одну строку, добавим свойство float:left:

li a{
	display:block;
	float:left
	}

4. Вот собственно и все, осталось навести красоту.

4.1 описываем стили для текста ссылок:

li  a{
	font-family:Tahoma,Helvetica,sans-serif;
	text-decoration:none;
	color:#fff
	}

4.2 добавляем внутренние отступы и фон для ссылки:

li a{
	display:block;
	float:left;
	padding:4px 10px;
	background:#193D6A
	}

4.3 описываем псевдокласс hover:

li a:hover{
	background:#408BE8;
	padding:7px 14px;
	position:relative;
	top:-3px
	}

смотрим, что получилось

Кроссбраузерность

IE 5+; Opera 7+; FF 1+; Mozilla 1+.

Что надо иметь ввиду

Не забудьте следующему блочному элементу после меню прописать в стилях свойство clear:both, чтобы прекратить обтекание.

Используя графический фон, можно добиться очень красивых эффектов.

Вертикальное выпадающее меню

Описание

Это вертикальное выпадающее меню, которое позволяет разместить большое количество ссылок на ограниченной площади. Идею этого меню я позаимствовал у господина Nick Rigby, доработав меню для своих целей.

Возможности

Простая, удобная и красивая навигация на сайте с большим количеством разделов.

Принцип работы

Идея этого меню проста, как и все гениальное, и основана на псевдоклассах CSS. Используя псевдокласс hover, мы меняем свойство выпадающего блока с display:none на display:block. Т. е., при наведении мышки невидимый контейнер со ссылками становится видимым.

Код с комментариями

1. Создадим тело нашего меню:

<div id="menu_body">
   <ul id="ul1">
          <li><a href="#">menu 1</a>
                <ul>
                    <li><a href="#">sub menu 1</a></li>
                    <li><a href="#">sub menu 2</a></li>
                    <li><a href="#">sub menu 3</a></li>
                    <li><a href="#">sub menu 4</a></li>
                </ul>
         </li>

.........

   </ul>
</div>

Где <div id="menu_body"> используется для задания фона, <ul id="ul1"> — список с пунктами меню, а <li><a href="#">sub menu 1</a></li> — пункты подменю.

2. При помощи стилей уберем подменю:

#menu_body li ul{display:none}

3. Используя псевдокласс hover, сделаем подменю видимым при наведении мыши:

#menu_body li:hover ul, #menu_body li.over ul{
	display: block
	}

4. Поскольку Internet Explorer считает, что псевдоклассом hover обладает только тег a, добавим небольшой код на JavaScript, который это исправит:

startList = function() {
     if (document.all&&document.getElementById) {
         navRoot = document.getElementById("ul1");
         for (i=0; i<navRoot.childNodes.length; i++) {
              node = navRoot.childNodes[i];
              if (node.nodeName=="LI") {
                  node.onmouseover=function() {
                      this.className+=" over";
                  }
               node.onmouseout=function() {
               this.className=this.className.replace(" over","");
                  }
              }
         }
     }
}
window.onload=startList;

5. Вот собственно и все, осталось навести красоту:

#menu_body{
	background:#81A192;
	width:200px
	}
	
#menu_body ul li{
	list-style-type:none;
	border-bottom:1px solid #fff;
	margin-left:-40px;
	padding-left:7px
	}

#menu_body ul li a{
	color:#fff;
	font-family:verdana,arial,sans-serif;
	text-decoration:none
	}
	
#menu_body ul li ul li{
	border:0;
	list-style-type:square;
	color:#fff;
	list-style-position:inside
	}
	
#menu_body ul li ul{
	border-top:1px solid #fff;
	margin-left:-7px;
	padding-left:50px
	}

смотрим, что получилось

Кроссбраузерность

IE 5+; Opera 7+; FF 1+; Mozilla 1+.

Что надо иметь в виду

У этого меню есть два очень серьезных недостатка: если список разделов или подразделов очень велик, то при открытии подменю появляется полоса прокрутки, а когда вы хотите прокрутить страницу, меню закрывается; если у пользователя старого браузера не работает это меню, то он вообще не сможет перемещаться по вашему сайту.

Вертикальное раскрывающееся меню

Описание

Это вертикальное раскрывающееся меню, которое позволяет разместить большое количество ссылок на ограниченной площади. Фактически это доработка предыдущего меню, которая позволяет убрать все его недостатки.

Возможности

Простая, удобная и красивая навигация на сайте с большим количеством разделов, которая будет работать во всех браузерах.

Принцип работы

Используя, как и в предыдущем примере, вложенные списки и свойства CSS display, добавляем короткий код на JavaScript для управления видимостью раскрывающихся блоков.

Код с комментариями

1. Создадим тело нашего меню:

<ul id="menu">
  <li><a href="#" onclick="openMenu(this);return false">menu 1</a>
    <ul>
      <li><a href="#">sub menu 1</a></li>
      <li><a href="#">sub menu 2</a></li>
      <li><a href="#">sub menu 3</a></li>
      <li><a href="#">sub menu 4</a></li>
      <li><a href="#">sub menu 5</a></li>
      <li><a href="#">sub menu 6</a></li>
      <li><a href="#">sub menu 7</a></li>
   </ul>
 </li>

.........

</ul>

Где <div id="menu"> используется для задания фона, <li><a href="#" onclick = "openMenu(this);return false">menu 1</a> — пункты меню c вызовом функции открытия или закрытия подменю по событию onclick.

2. Напишем функцию на JavaScript, которая будет открывать и закрывать подменю.

function openMenu(node){
	var subMenu = node.parentNode.getElementsByTagName("ul")[0];
	subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}

3. Позаботимся о пользователях старых браузеров, и вместо того, чтобы писать в стилях #menu li ul{display:none}, напишем еще одну функцию, которая будет закрывать все подменю при загрузке страницы. Если по каким-либо причинам наш JavaScript код не сработает, меню будет полностью открыто и позволит пользователю кликать на ссылки подменю.

function allClose(){
	var list = document.getElementById("menu").getElementsByTagName("ul");
	for(var i=0;i<list.length;i++){
		list[i].style.display = "none";
	}
}

4. Поставим вызов этой функции на загрузку страницы.

<body onload="allClose()">

5. Вот собственно и все, осталось навести красоту:

#menu{background:#81A192;width:200px;list-style-type:none;padding:0;margin:0}
#menu li{border-bottom:1px solid #fff;padding:3px}
#menu li a{color:#fff;font-family:verdana,arial,sans-serif;text-decoration:none}
#menu li ul{border-top:1px solid #fff;padding:0;margin:0;list-style-type:square;list-style-position:inside}
#menu li ul li{border:0;list-style-type:square;color:#fff;list-style-position:inside}

Кроссбраузерность

IE 5+; Opera 7+; FF 1+; Mozilla 1+.

смотрим, что получилось

P.S.

В этой статье я привел примеры самых распространенных типов меню. И показал, какие неограниченные возможности дает web-разработчику использование CSS и JavaScript. Несмотря на то, что в сети все еще встречаются пользователи старых «неправильных» браузеров, их с каждым днем становится все меньше, так что давайте не будем ориентироваться на прошлое и посмотрим в глаза будущему.

62 комментария

  1. Helen

    Огромное спасибо за статью.Я очень долго искала такое толковое объяснение.У меня все получилось.
    СПАСИБО еще раз

    4 февраля 2012, 19:28
  2. Валик

    Автору СПАСИБО. Безмерно благодарен, так и продолжай))) Очень доходчиво и максимально просто объяснил. Еще раз спасибо.

    9 октября 2012, 13:05
  3. Антон

    Я ни разу не писал JavaScript и тем более не знаю куда его вставлять. Просьба подробно рассказать куда что вставить. Делаю сайты на UCOZ/ Заранее спс

    12 ноября 2012, 13:13
  4. сергей

    Здравствуйте! Очень интересно! Я новичок и делаю первый сайт на WordPress. Подскажите пожалуйста, как и Антону, куда вставляется код вертикального меню

    11 декабря 2012, 19:47
  5. Вячеслав

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

    вкладка|
    |_подпункт 1
    |_подпункт 2|
    |_подпнкт подпункта 1

    3 февраля 2013, 23:12
  6. Сергей

    Меню при щелчке хорошие,но в виде такой конструкции я его не применю в WordPress. Меню там сгенерируется автоматически и я не смогу ссылке поставить onclick.
    Какие еще способы есть, чтобы меню открывалось по ссылке?

    12 ноября 2013, 16:44
  7. Елена

    Спасибо очень большое!

    24 февраля 2015, 15:17
  8. Анастасия

    Все отлично, единственное что не поняла, что такое «.over» в той части кода, где мы прописываем псевдокласс для li:

    #menu_body li:hover ul, #menu_body li.over ul {
    display: block;
    }
    Объясните, пожалуйста, что такое li.over, что оно делает?

    31 августа 2015, 17:38
  9. Sq.Piglet

    Этой статье 10 лет. Лучше поискать более свежий материал.

    1 сентября 2015, 8:39
  10. Алексей

    Sq.Piglet ваш совет для изложенных ниже последствий ?

    Что-бы на старых браузерах (30% пользователей во всём мире)нечего не работало и потенциальный клиент больше никогда не вернулся на твой супер новый сайт.

    28 декабря 2015, 5:45
  11. Miniraptor

    У вас большая проблема с якорями, если поставлена ссылка в атрибут «href» у элемента то ваш код просто напросто переведет пользователя по заданной ссылке. Для исправления данного бага, необходимо прописать onclick=»javascript:void(0)», либо в самом скрипте прописать поиск элемента и поставить preventEvent у этого элемента.

    Повторюсь еще раз, работает только для якорей (элементов , где не прописан атрибут href)

    8 января 2016, 7:47
  12. Илья

    кросбраузерность это конечно круто, но сейчас немного другие требования и запросы. Такую же выпадашку можно сделать на CSS3 и она не будет работать только в ИЕ 6, остальные браузеры норм. Из подходящих примеров, например вот http://help-wp.ru/vertikalnoe-vypadayushhee-menu/

    9 февраля 2016, 12:47

RSS комментариев

Комментировать