Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Уроки » Создаем многоуровневое горизонтальное меню с эффектом анимации на CSS3

Создаем многоуровневое горизонтальное меню с эффектом анимации на 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. Выставляем ширину панели, добавляем функции градиента, закругленные углы и тень для нижней границы:

 

CSS3 стили меню

 

#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 для анимации появления подменю. Результат на лицо:
 

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) дочерние элементы списка в стиле:
 

CSS3 меню навигации

 

#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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

44 комментария
  1. artur4ik:

    Круто. Добавлю блог в избранное и друзьям посоветую. Ждите новых читателей 🙂

    Ответить
  2. Олег:

    Очень класная менюшка, большое спасибо за информацию

    Ответить
  3. Алексей:

    Скажите, а как будет функционировать такое меню на планшетах, смартфонах (у меня на Гелакси 3 не работает).

    Как добавить событие при получении «фокуса»?

    Что можете посоветовать?

    Ответить
    • driver:

      Алексей.

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

      Ответить
  4. А что делать если в подменю название слишком длинное?

    Текст уходит дальше, а рамка нет.

    Ответить
    • driver:

      Увеличьте ширину width: до необходимой в #menu ul a. Так же придется подогнать позицию следующих выпадающих пунктов, так что бы они не наезжали один на другой, для этого в разделе #menu ul ul следует подобрать такое значение для left:( расстояние от левого края родительского элемента ), чтобы панели не перекрывали одна другую.

      Например, при увеличении общей ширины выпадающих пунктов до width: 200px; смещаем влево последующие панели #menu ul ul через свойство left: 220px;(+ -).

      Экспериментируя с параметрами можно добиться любого желаемого результата.

      Ответить
  5. Подскажите как сделать подобное вертикальное меню.

    Ответить
    • driver:

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

      Ответить
  6. Евгений:

    Здравствуйте.

    Подскажите, как сменить подсветку менюшки? Я хочу вместо синего, оранжевый.

    Ответить
    • driver:

      Здравствуйте.

      Найдите в коде CSS правило:

      #menu ul a:hover { background-color: #0186BA; background-image: linear-gradient(#04ACEC, #0186BA); }

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

      #menu ul a:hover { background-color: #FFA500; background-image: linear-gradient(#FFD187, #FFA500); }

      Так же подберите более подходящий цвет в правилах для стрелок:

      #menu ul li:first-child a:hover:after

      и

      #menu ul ul li:first-child a:hover:after

      Ответить
  7. Добрый день,

    Меню интересное. Но загвоздка в отображении меню в браузере Opera. Есть ли способы заставить отображаться меню в данном браузере?

    Ответить
    • driver:

      Александр.

      А что не так в Opera? Вот сижу уткнувшись в браузере Opera, на это меню, все прекрасно работает. Может вы отключили javascript, такое бывает))) хотя и в этом случае все замечательно работает, так как меню и анимация построены на CSS3 ))) Даже IEшка не брыкается, только меню выглядит несколько иначе

      Ответить
      • Driver,

        вот сайт gv-ternovskiy.ru с навигацией. Опера скачена чистая с нуля. Настройки по дефолту. Кнопочки нажимаются, но самой навигации не видно. Она «невидимка» =)

        Ответить
        • driver:

          Александр. У вас у списка меню в теге <ul> не знаю зачем, прописано position:fixed; уберите и меню появится, и будет работать. Только, уж больно ваш сайт тормозит в Opera, может стоит поэкспериментировать со значениями трансформации фоновых изображений, если конечно такое возможно и доступно)))

  8. Driver,

    только в опере не показывается меню и тормозит жутко. сафари. лиса, ослик отменно крутят сайт, шустро и с навигацией. Сейчас попробую убрать позицию fixed

    Ответить
  9. Driver,

    Спасибо. заработало )

    Ответить
    • driver:

      Всегда пожалуйста ))) Кстати, заметьте и блок боковой с содержанием, встает на место, точнее, занимает более ровную позицию для восприятия.

      Удачи!

      Ответить
  10. Здравствуйте!

    Подскажите, а как прикрутить это меню к joomla?

    Можно ли в файле html убрать названия разделов (Главная...Контакты...) и выводить их посредством CSS системы? Или это так просто не сделать?

    Заранее благодарю!

    Ответить
    • driver:

      Здравствуйте, Тамара.

      Зная структуру шаблонов joomla, «прикрутить» это меню не составит труда, меню написано на чистом CSS3, так что проще всего использовать значения стилей из этого меню, для элементов меню своего шаблона. Как вы понимаете, классы и идентификаторы никто менять не запрещает ))) Так же как и убирать, или добавлять пункты меню, вы можете сколько угодно.

      Удачи и спасибо за интерес к статье.

      Ответить
  11. Здравствуйте, подскажите пож., не могу разобраться, что я делаю не так, ваша демо версия у меня в ie отображается как положено, а вот на моем сайте после установки,в ie не работают ссылки, просто не выводятся...

    Ответить
  12. Александр:

    Не подскажите почему менюшка может не работать в Internet Explorer 9, выпадающие пункты не показываются.

    Ответить
12»
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться без комментирования

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru