В данном уроке мы разберем, как создать выпадающее меню совсем без использования JavaScript. Простое, но функциональное решение на основе общедоступных свойств CSS можно использовать где угодно.
Концепция
Выпадающее меню служит в качестве обзора иерархии разделов, которые содержатся в пункте меню, объединяющем их. Обычно в меню перечисляются все подразделы определенной секции, если навести указатель мыши на нее.
Выпадающее меню очень удобно, когда показывает все содержание всех секции, содержащихся на сайте, и дает возможность перейти на любую страницу из любого места сайта.
Разметка
Большинство выпадающих меню основано на использовании громоздкой разметки и Javascript. Наш вариант будет использовать простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.
<ul id="nav">
<li>
<a href="#" title="Вернуться на главную страницу">Главная</a>
</li>
<li>
<a href="#" title="Информация о компании">О нас</a>
<ul>
<li><a href="#">Продукты</a></li>
<li><a href="#">Команда</a></li>
</ul>
</li>
<li>
<a href="#" title="Что мы можем для вас сделать">Услуги</a>
<ul>
<li><a href="#">Услуга один</a></li>
<li><a href="#">Услуга два</a></li>
<li><a href="#">Услуга три</a></li>
<li><a href="#">Услуга четыре</a></li>
</ul>
</li>
<li>
<a href="#" title="Наша продуктовая линейка">Продукты</a>
<ul>
<li><a href="#">Маленький продукт (первый)</a></li>
<li><a href="#">Маленький продукт (второй)</a></li>
<li><a href="#">Маленький продукт (третий)</a></li>
<li><a href="#">Маленький продукт (четвертый)</a></li>
<li><a href="#">Большой продукт (пятый)</a></li>
<li><a href="#">Большой продукт (шестой)</a></li>
<li><a href="#">Большой продукт (седьмой)</a></li>
<li><a href="#">Большой продукт (восьмой)</a></li>
<li><a href="#">Невообразимый продукт (девятый)</a></li>
<li><a href="#">Невообразимый продукт (десятый)</a></li>
<li><a href="#">Невообразимый продукт (одиннадцатый)</a></li>
</ul>
</li>
<li>
<a href="#" title="Как с нами связаться">Контакт</a>
<ul>
<li><a href="#">Часы работы</a></li>
<li><a href="#">Местоположение</a></li>
</ul>
</li>
</ul>
Разметка достаточно проста и представляет собой серию вложенных списков <ul>. Нет никаких ID, классов и элементов. Простой ясный код.
Элемент #nav <ul> содержит серию элементов <li>. Все пункты, которые нуждаются в выпадающих подпунктах, содержат другой элемент <ul>. Обратите внимание, что элемент <ul> выпадающих подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно более чистой.
CSS
Здесь происходит магия превращения - мы используем CSS для трансформирования серии вложенных списков <ul> в отличное, простое в использовании и самодостаточное выпадающее меню.
/*------------------------------------*\
НАВИГАЦИЯ
\*------------------------------------*/
#nav{
float:left;
width:100%;
list-style:none;
font-weight:bold;
margin-bottom:10px;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
display:block;
}
#nav li a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
#nav li a:hover{
color:#fff;
background:#6b0c36;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
text-decoration:underline;
}
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
opacity:0; /* Устанавливаем начальное состояние прозрачности */
-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
float:none;
background:url(dot.gif);
}
#nav ul a{
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
left:0; /* Приносим его обратно на экран, когда нужно */
opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
background:#6b0c36;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
text-decoration:none;
-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
background:#333;
background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
text-decoration:underline;
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
}
Первый раздел кода весьма простой - мы устанавливаем обычное горизонтальное меню. Но, обратите внимание, что селекторы #nav li и #nav li a выделяют все элементы списка и ссылки в выпадающих пунктах тоже. Использование каскадов.
Следует отметить использование position:relative; для элементов списка. Таким образом, мы сможем использовать position:absolute; для вложенных элементов <ul>.
Вложенные списки
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод, лучше чем display:none;) */
opacity:0; /* Устанавливаем начальное состояние прозрачности */
-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
В данном коде устанавливаются стили для вложенных <ul> в пункт верхнего уровня. Очевидно, что нужно удалить метки пунктов списка с помощью list-style:none;, и установить position:absolute; для позиционирования выпадающих подпунктов под пунктом списка, который их содержит.
Следующая строка гораздо более интересна. Обычно используется свойство display:none; для того, чтобы скрыть выпадающий пункт, когда он не используется. Но так как большинство программ для чтения с экрана игнорируют все, что имеет свойство display:none;, то использование такого метода очень нежелательно. Вместо этого мы используем абсолютное позиционирование <ul> для помещения его в позицию -9999px за пределами экрана, когда он не используется.
Затем следует свойство opacity:0;, для скрытия <ul>, и декларация для браузеров Webkit, для плавного вывода элемента <ul> при наведении курсора мыши.
#nav ul li{
padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
float:none;
background:url(dot.gif);
}
#nav ul a{
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
left:0; /* Приносим его обратно на экран, когда нужно */
opacity:1; /* Делаем непрозрачным */
}
Здесь мы устанавливаем стили по умолчанию для пунктов списка и ссылок. Обратите внимание на свойство padding-top:1px; для элемента <li>. Так как все цвета устанавливаются для элементов <a>, то установка отступа в 1px для элемента <li> сдвигает элемент <a>, и, следовательно, цветную область от границы пункта списка. Таким образом, создается иллюзия, что пункты списка разделены. Интересно, что IE не распознает шаблон <li> при наведении курсора мыши и закрывает выпадающий список. Для решения этой небольшой проблемы добавляется прозрачное изображение gif 1 х 1 px.
Для элемента #nav ul a мы устанавливаем свойство white-space:nowrap; для предотвращения переноса строк на другую строку.
Последняя часть кода выводит выпадающие подпункты, когда курсор мыши оказывается над соответствующим пунктом меню. Так как псевдо класс :hover не работает в IE6, выпадающее меню не работает в данном браузере. Проблему можно обойти множеством способов.
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
background:#6b0c36;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
text-decoration:underline;
}
#nav li:hover a определяет, что произойдет со ссылкой верхнего уровня, когда наследник будет иметь состояние hover:
Выпадающий список <ul> расположен внутри элемента <li>.
Если навести курсор мыши на ссылку (<a>) в выпадающем списке (<ul>), то одновременно пункт списка верхнего уровня (<li>) тоже будет иметь состояние hover, так как выделен контент внутри него.
Так как технически используется состояние hover для элемента списка верхнего уровня, то #nav li:hover a действует, задавая стиля для ссылки.
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
text-decoration:none;
-webkit-transition:-webkit-transform 0.075s linear;
}
Здесь мы изменяем некоторые аспекты для состояния hover, чтобы выпадающие элементы отличались от ссылок верхнего уровня. В данном уровне мы просто отключаем подчеркивание текста.
Также добавляется правило для браузеров Webkit -webkit-transition:-webkit-transform 0.075s linear;, которое анимирует -webkit-transform с помощью затухания/появления в течение 0.075 секунды.
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
background:#333;
background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
text-decoration:underline;
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
}
В последней части определяются стили для выделения определенного пункта в выпадающем списке при наведении курсора мыши.
Вначале мы определяем два свойства background:;. Определение background:rgba(51,51,51,0.75); устанавливает умеренно серый фон для пункта с прозрачностью 0.75. Те браузеры, которые не распознают такое определение цвета (например, IE) будут использовать определение цвета в старом стиле в предыдущей строке.
Готово!
Простая структура HTML разметки и несколько строк CSS создают замечательное выпадающее меню без использования всемогущего JavaScript. Наверняка найдется немало проектов, в которых такое решение найдет свое место.