Создаем многоуровневое горизонтальное меню с эффектом анимации на CSS3

Продолжаем серию уроков по созданию различных видов навигационныхменю. Постоянные читатели блога, наверняка заметили, что чаще всего в работе я склоняюсь в сторону использования свойств CSS3, без подключения javascript и дополнительных файлов изображений, не забывая при этом об общей картине дизайна и функциональных требований к тому или иному объекту.

Сегодня мы научимся создавать многоуровневое, горизонтальное меню с интересным эффектом анимации для выпадающих подпунктов, исключительно средствами CSS3. В уроке представлены структура построения меню и выпадающих списков, все стили оформления, включая визуальный эффект, для создания которого применяются псевдо-элементы с пользовательскими атрибутами.

Примечание: Следует помнить, что еще не все браузеры одинаково хорошо поддерживают функции CSS3.  Например, в Internet Explorer данное меню будет выглядеть несколько иначе 🙁
 

ДемоСкачать

Пример посмотрели, теперь давайте посмотрим на весь расклад, начнем с разметки html каркаса нашего меню.

HTML

Здесь ничего не обычного, для меню мы будем использовать типовую разметку в виде неупорядоченного списка. Вот как выглядит отрывок кода разметки html основных пунктов меню с выпадающими подпунктами применительно к нашей версии:
 

<nav id="menu-wrap"> <ul id="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Категории</a> <ul> <li><a href="#">HTML/CSS</a></li> <li><a href="#">Графика</a></li> <li><a href="#">Разработка</a></li> <li><a href="#">Веб дизайн</a></li> </ul> </li> <li><a href="#">Статьи</a></li> <li><a href="#">О Сайте</a></li> <li><a href="#">Контакты</a></li> </ul> </nav>

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

CSS3

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

Сбрасываем стили для списка ul по умолчанию:

#menu, #menu ul { margin: 0; padding: 0; list-style: none; }

Маркер для списка в нашем случае ненужен, значит list-style выставляем значение none.

Устанавливаем базовые стили для основной панели #menu списка ul. Выставляем ширину панели, добавляем функции градиента, закругленные углы и тень для нижней границы:

#menu { width: 960px; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; }

При верстке макета меню никак не обойтись без плавающих элементов: HTML элементов со свойствами float:left и float:right которые обычно выпадают из основного потока и выходят за границы родительского элемента, и в результате этого родительский элемент схлопывается. Для того, чтобы предотвратить схлопывание необходима очистка потока (Clear Float). Для этого используем компактный метод очистки потока стилями при помощи псевдоклассов :before и :after.
 

#menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom:1; /* Хак для IE 6 и 7 */ }

Элементы списка

Обратите внимание на #menu li:hover > a селектор. Это, пожалуй, один из самых важных элементов построения и оформления этого выпадающего меню

Вот как это работает: Выбираем «a» элемент, который является дочерним «li» ,«li» элемент должен быть в основном потоке «# menu». Устанавливаем необходимые нам свойства для этих элементов, расположение, параметры текста, свет ссылок и т.д.:
 

#menu li { float: left; border-right: 1px solid #222; -webkit-box-shadow: 1px 0 0 #444; -moz-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover { /* Для IE6 */ color: #fafafa; }

Подпункты меню

С помощью CSS3 transiton мы можем анимировать изменения CSS свойств, таких как marginили opacity. Использовал эту замечательную функцию CSS3 для анимации появления подменю. Результат на лицо:
 

#menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: #444; background: -webkit-linear-gradient(#444, #111); background: -moz-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; / * Назначаем изменения свойств CSS плавно и в течение установленного времени */ -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: linear-gradient(#04acec, #0186ba); }

Первый(:first-child) и последний(:last-child) дочерние элементы списка в стиле:
 

#menu ul li:first-child > a { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #menu ul li:last-child > a { -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }

На этом пожалуй и все. Собрав воедино все элементы стилей и подключив к странице html, мы получим замечательное, горизонтальное, многоуровневое меню с привлекательным эффектом анимации для выпадающих подпунктов. Если включить немного фантазии и поэкспериментировать с параметрами стилей CSS, можно добиться потрясающих результатов, создать свой, неповторимый стиль навигационного меню.

ДемоСкачать

Данный урок подготовлен по материалам: RedTeamDesign

источник