Создаем выпадающее меню на чистом CSS
В данном уроке мы разберем, как создать выпадающее меню совсем без использования 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. Наверняка найдется немало проектов, в которых такое решение найдет свое место.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Перевел: Сергей Фастунов
Урок создан: 23 Февраля 2011
Просмотров: 474538
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.