От автора: меню — это элемент, который присутствует практически на каждом сайте. Красивое меню, безусловно, становится украшением сайта. В этом уроке мы с Вами создадим простое, но вместе с тем красивое меню. При этом мы не используем ни строчки JavaScript-кода.
Ранее для того, чтобы создать меню из данного урока, необходимо было использовать JavaScript, сейчас же для получения подобного эффекта достаточно всего одной строки кода CSS3.
Итак, поскольку суть всего урока сводится к получению нужного нам эффекта, нам достаточно взять практически любое готовое меню. Также мы можем создать свое несложное меню. Давайте создадим такое.
Создадим список с несколькими элементами меню:
|
1 2 3 4 5 6 7 |
<ul class="menu"> <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> |
Теперь напишем несколько стилевых правил, которые простой список превратят в простое горизонтальное меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
body{background: url(denim.png);} .menu{list-style: none;} .menu li{ float: left; margin: 0 20px 0 0; background: #044fac; border-radius: 5px; width: 150px; text-align: center; line-height: 50px; } .menu a{ color: #fff; display: block; height: 50px; font-size: 20px; text-decoration: none; } .menu a:hover{ background: #b4145b; border-radius: 5px; } |
В итоге мы получили, на мой взгляд, симпатичное горизонтальное меню
Теперь давайте добавим к нему немного магии CSS3. Для этого мы воспользуемся всего одним свойством — transition. Как Вы видите, сейчас при наведении на любой пункт меню происходит изменения фонового цвета. Смена происходит мгновенно. Свойство transition позволяет сделать этот переход (смену фонового цвета) плавным.
Вообще, данное свойство (transition) можно применять не только к фоновому цвету, его можно применять к чему угодно — цвет, шрифт, размер, положение. Свойство transition позволяет назначать изменение значений всех этих свойств в течение определенного промежутка времени, т.е. позволяет добавить плавность.
Свойство transition имеет 4 возможных значения:
|
1 |
transition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ] |
transition-property — анимируемое свойство
transition-duration — продолжительность анимации
transition-timing-function — временная функция, используемая для анимации
transition-delay — задержка перед началом анимации
Два последних свойства являются необязательными. В нашем примере мы будем анимировать фон. На самом деле можно анимировать для одного и того же элемента сразу несколько свойств. При этом можно указывать для каждого свойства свои настройки анимации.
Если никаких особых настроек анимации для того или иного свойства не нужно, тогда вместо значения transition-property можно использовать ключевое слово all, т.е. мы анимируем все свойства с одинаковыми параметрами. В видео Вы можете найти несколько примеров использования свойства transition. Здесь же просто приведем конечный результат, который на практике используется чаще всего. Итак, добавим анимацию при наведении на пункт меню мыши:
|
1 2 3 4 5 6 7 8 9 |
.menu a:hover{ background: #b4145b; border-radius: 5px; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } |
Здесь мы анимируем все свойства в течение 1 секунды. Также можно использовать вендорные префиксы для совместимости с браузерами старых версий.
Вот, собственно, и все. Теперь при наведении на любой пункт меню мы увидим эффект плавной смены фона, который, на мой взгляд, придаст дополнительную красоту нашему меню.
Остается отметить, что сейчас мы анимируем свойства только при наведении на пункт меню. Когда мышь уходит с элемента меню — фоновый цвет принимает исходное значение без анимации. Если же Вы захотите сохранить анимацию для обоих действий (и при наведении мыши, и при уходе мыши с элемента), тогда просто перенесите свойство transition для элемента меню. Стили в таком случае будут следующими:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.menu a{ color: #fff; display: block; height: 50px; font-size: 20px; text-decoration: none; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .menu a:hover{ background: #b4145b; border-radius: 5px; } |
На этом урок завершен. Удачи Вам и до новых встреч!
Комментарии (20)