Красиве меню CSS без JavaScript

16

Від автора: меню — це елемент, який присутній практично на кожному сайті. Красиве меню, безумовно, стає окрасою сайту. У цьому уроці ми з Вами створимо простий, але разом з тим красиве меню. При цьому ми не використовуємо ні рядка JavaScript-коду.

Раніше для того, щоб створити меню з даного уроку, необхідно використовувати JavaScript, зараз же для отримання подібного ефекту достатньо всього одного рядка коду CSS3.

Красиве меню CSS без JavaScriptКрасиве меню CSS без JavaScript

Отже, оскільки суть всього уроку зводиться до отримання потрібного нам ефекту, нам достатньо взяти практично будь-яке готове меню. Також ми можемо створити своє нескладне меню. Давайте створимо таке.

Створимо список з декількома елементами меню:

  • Головна
  • Про нас
  • Прайс
  • Галерея
  • Контакти

Тепер напишемо декілька стильових правил, які простий список перетворять на просте горизонтальне меню:

body{background: url(denim.png);}
.menu{list-style: none;}
.menu li{
float: left;
margin: 0 0 0 20px;
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;
}

В результаті ми отримали, на мій погляд, симпатичне горизонтальне меню

Красиве меню CSS без JavaScript

Тепер давайте додамо до нього трохи магії CSS3. Для цього ми скористаємося лише однією властивістю — transition. Як Ви бачите, зараз при наведенні на будь-який пункт меню відбувається зміни фонового кольору. Зміна відбувається миттєво. Властивість transition дозволяє зробити цей перехід (зміну фонового кольору) плавним.

Взагалі, ця властивість (transition) можна застосовувати не тільки до фонового кольору, його можна застосовувати до чого завгодно — колір, шрифт, розмір, положення. Властивість transition дозволяє призначати зміна значень всіх цих властивостей протягом певного проміжку часу, тобто дозволяє додати плавність.

Властивість transition має 4 можливих значення:

transition: [|| || || ]

transition-property — анимируемое властивість

transition-duration — тривалість анімації

transition-timing-function — часова функція, використовувана для анімації

transition-delay — затримка перед початком анімації

Два останніх властивості є необов’язковими. У нашому прикладі ми будемо анімувати фон. Насправді можна анімувати для одного і того ж елемента відразу кілька властивостей. При цьому можна вказувати для кожного властивості свої налаштування анімації.

Якщо ніяких особливих ефектів анімації для тієї чи іншої властивості не потрібно, тоді замість значення transition-property можна використовувати ключове слово all, тобто ми анимируем всі властивості з однаковими параметрами. У відео Ви можете знайти декілька прикладів використання властивості transition. Тут же просто наведемо кінцевий результат, який на практиці використовується найчастіше. Отже, додамо анімацію при наведенні на пункт меню миші:

.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 для елемента меню. Стилі в такому випадку будуть наступними:

.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;
}

На цьому урок закінчено. Удачі Вам і до нових зустрічей!