Как сделать красивое меню с анимацией при наведении на чистом CSS3

16 174 любопытных

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

Хотелось бы сразу сказать, что данное меню действительно не малых размеров и подойдёт не для всех сайтов и не для каждого дизайна. Оно склонно более к минималистическому стилю оформления. Хотя если не много подредактировать стили, его можно настороить под любой дизайн сайта.

В этом посте Вы сможете скачать исходники навигации, а так же посмотреть его в действии, то есть пример.

Напоминаю, что данным уроком с нами поделился сайт designfestival.com, за что ему огромное спасибо.

Ну а теперь давайте перейдём, непосредственно, к созданию.

Пример ι Скачать исходники

HTML

Данный код нужно вставлять в то место где Вы хотите отобразить меню:

<ul class="main-ul">

<li><a href="#"><span>Главная</span></a></li>
 <li><a href="#"><span>Статьи</span></a></li>
 <li><a href="#"><span>Блог</span></a></li>
 <li><a href="#"><span>Галерея</span></a></li>
 <li><a href="#"><span>О сайте</span></a></li>
 <li><a href="#"><span>Контакты</span></a></li>
 <li><a href="#"><span>Дизайн</span></a></li>
 <li><a href="#"><span>Портфолио</span></a></li>

</ul>

Как видите здесь мы тегу <ul> задали класс main-ul, который в дальнейшем будем использовать в стилях.

Теперь давайте перейдём к стилям CSS.

CSS

Для начала в любое место в стилях CSS добавьте вот это:

ol, ul { list-style: none; }

Так мы убираем стандартный стиль тегов ol и ul.

Позиция

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

.main-ul li {
 float:left;
 position:relative;
 width:25%;
 text-align:center;
 }

Плавная анимация (transition)

А вот сейчас уже будем делать само оформление меню. Здесь мы будем использовать CSS3 анимацию (transition), которая в последствии позволяет нам делать такие красивые плавные эффекты при наведении на них. Вот он сам код:

.main-ul li a {
 display:block;
 padding-bottom:20px;
 padding-right:10px;
 padding-top:10px;
 padding-left:10px;
 text-decoration:none;
 position: relative;
 z-index: 100;
 background-color: rgba(164, 164, 164, 0.2);
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
 }

Скорость анимации здесь стоит в 1 секунду. По желанию её можно изменить.

Шрифты и размеры

Теперь нам нужно задать размер, стиль и сам шрифт. Естественно Вы сможете их изменить под себя, если только стандартный размер Вас не устраивает:

.main-ul li a span{
 display:block;
 padding-top:10px;
 font-weight:700;
 font-size: 20px;
 color: rgba(120, 120, 120, 0.9);
 text-transform:uppercase;
 font-family: 'Kotta One', serif;
 }
.main-ul li:hover span{
 color: #fff;
}

Так же здесь можно установить другой цвет ссылки при наведении. Он задан под тегом hover, стандартный цвет #fff (белый).

Анимация (transform) и цвет при наведении

Вот и пришло время добавить к нашему меню эффект, (как бы так его обозвать :-)) не большого поворачивания. Это мы будем делать с помощью CSS transform. И здесь же будем отдельно делать для каждой ссылки другой цвет при наведении:

.main-ul li:nth-child(1):hover a{
 background-color: rgba(175,54,55,0.8);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 transform: rotate(-3deg);
}

Как видно цвет выставляется в background-color. А градус поворота здесь: transform: rotate(-3deg); Это значение можно изменить.

Далее идёт практически тот же CSS код только с не много изменённым классом и цветом в background-color.

.main-ul li:nth-child(2):hover a{
 background-color: rgba(199, 204, 73, 0.8);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
.main-ul li:nth-child(3):hover a{
 background-color: rgba(213, 135, 11, 0.8);
 -moz-transform: rotate(3deg);
 -webkit-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 transform: rotate(3deg);
}
.main-ul li:nth-child(4):hover a{
 background-color: rgba(51, 143, 144, 0.8);
 -moz-transform: rotate(3deg);
 -webkit-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 transform: rotate(3deg);
}
.main-ul li:nth-child(5):hover a{
 background-color: rgba(117,18,98,0.8);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
.main-ul li:nth-child(6):hover a{
 background-color: rgba(33, 136, 215, 0.8);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
.main-ul li:nth-child(7):hover a{
 background-color: rgba(109, 109, 109, 0.8);
 -moz-transform: rotate(3deg);
 -webkit-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 transform: rotate(3deg);
}
.main-ul li:nth-child(8):hover a{
 background-color: rgba(152, 120, 92, 0.8);
 -moz-transform: rotate(3deg);
 -webkit-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 transform: rotate(3deg);
}