Як зробити красиве меню з анімацією при наведенні на чистому css3

Привіт, дорогі Новомосковсктелі блогу. Сьогодні ми будемо вчиться з Вами робити гарне велике меню в шапці сайту, з досить не поганим і привабливим ефектом при наведенні.

Хотілося б відразу сказати, що дане меню дійсно не малих розмірів і підійде не для всіх сайтів і не для кожного дизайну. Воно схильне більше до мінімалістичному стилю оформлення. Хоча якщо не багато підредагувати стилі, його можна настороіть під будь-який дизайн сайту.

У цьому пості Ви зможете завантажити вихідні навігації, а так само подивитися його в дії, тобто приклад.

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

Ну а тепер давайте перейдемо, безпосередньо, до створення.

Як зробити красиве меню з анімацією при наведенні на чистому css3

Приклад ι Завантажити вихідні

Даний код потрібно вставляти в те місце де Ви хочете відобразити меню:

Як бачите тут ми тегу

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

    Тепер давайте перейдемо до стилів CSS.

    Для початку в будь-яке місце в стилях CSS додайте ось це:

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

    Тепер нам потрібно розподілити сам список на веб сторінці. Або іншими словами задати позицію. Це робиться в такий спосіб.

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

    А ось зараз вже будемо робити саме оформлення меню. Тут ми будемо використовувати CSS3 анімацію (transition), яка надалі дозволяє нам робити такі гарні плавні ефекти при наведенні на них. Ось він сам код:

    Швидкість анімації тут варто в 1 секунду. За бажанням її можна змінити.

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

    Так само тут можна встановити інший колір посилання при наведенні. Він заданий під тегом hover, стандартний колір #fff (білий).

    Анімація (transform) і колір при наведенні

    Ось і прийшов час додати до нашого меню ефект, (як би так його обізвати :-)) не великого повертання. Це ми будемо робити за допомогою CSS transform. І тут же будемо окремо робити для кожного посилання інший колір при наведенні:

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

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

    Приклад ι Завантажити вихідні

    Ось і вийшло досить таки хороше меню, яке можна використовувати на будь-яких сайтах. -)