Css3 меню в стилі мінімалізм

Як ви вже, напевно, чули CSS3 анімація є потужним інструментом, який дозволяє створювати анімацію без необхідності застосування додаткових скриптів на сторінці. І в цьому уроці за допомогою використання анімації ми створимо симпатичне меню, яке не займатиме багато місця на сайті. Зазвичай таке меню роблять фіксованим справа. Коли сторінку прокручуєш - меню залишається постійно справа.

Приклад меню можна побачити тут:

Подивитися прімерСкачать

HTML частина

HTML каркас меню - це невпорядкований список. Таким чином зазвичай і створюються меню, тому їх легко оформляти і налаштовувати. Усередині посилання знаходиться елемент, який спочатку не видно, а з`являється тільки при наведенні. Кожне посилання має свій унікальний клас, щоб ми могли задавати фон при наведенні для кожного посилання:

12345678910111213141516171819202122232425262728293031

lt;ul id="NavigationMenu"gt;lt;ligt;lt;a class="Home" href="#"gt;lt;spangt; Головнаlt;/spangt;lt;/agt;lt;/ligt;lt;ligt;lt;a class="About" href="#"gt;lt;spangt; Про автораlt;/spangt;lt;/agt;lt;/ligt;lt;ligt;lt;a class="Services" href="#"gt;lt;spangt; Сервісиlt;/spangt;lt;/agt;lt;/ligt;lt;ligt;lt;a class="Portfolio" href="#"gt;lt;spangt; Портфоліоlt;/spangt;lt;/agt;lt;/ligt;lt;ligt;lt;a class="Contact" href="#"gt;lt;spangt; Контактиlt;/spangt;lt;/agt;lt;/ligt;lt;/ulgt;

CSS частина

Каркас меню готовий і зараз ми можемо приступати до оформленням меню. Меню буде працювати навіть в старих браузерах (навіть в IE6).

1234567891011121314151617181920212223

* {margin:0-padding:0-}body {font-size:14px-color:# 666-background:# 111 no-repeat-/ * CSS3 градієнт фону * /background-image: -moz-radial-gradient(center -100px 45deg, circle farthest-corner, # 444 150px, # 111 300px)-background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(# 444), to(# 111))-font-family: Arial, Helvetica, sans-serif-}#navigationMenu li {list-style:none-height:39px-padding:2px-width:40px-}

Для завдання фону ми спочатку зробили який буде як запасний, а потім добавили два радіальних градієнта на CSS3. Якщо браузер відвідувача не підтримує градієнти, він просто буде ігнорувати їх і показувати просто цвіт фону.

123456789101112131415161718192021222324252627282930313233343536373839404142

#navigationMenu span {/ * Властивості контейнера * /width:0-left:38px-padding:0-position:absolute-overflow:hidden-/ * Властивості тексту * /font-family:`Myriad Pro`,Arial, Helvetica, sans-serif-font-size:18px-font-weight:bold-letter-spacing:0.6px-white-space:nowrap-line-height:39px--webkit-transition: 0.25s--moz-transition: 0.25s-transition: 0.25s-}#navigationMenu a {background:url(`Img / navigation.jpg`) no-repeat-height:39px-width:38px-display:block-position:relative-}/ * Стилі при наведенні * /#navigationMenu a: hover span {width:auto-padding:0 20px-overflow:visible-}#navigationMenu a: hover {text-decoration:none--moz-box-shadow:0 0 5px # 9ddff5--webkit-box-shadow:0 0 5px # 9ddff5-box-shadow:0 0 5px # 9ddff5-}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374

/ * Зеленая кнопка * /#navigationMenu .home {background-position:0 0-}#navigationMenu .home: hover {background-position:0 -39px-}#navigationMenu .home span {background-color:# 7da315-color:# 3d4f0c-text-shadow:1px 1px 0 # 99bf31-}/ * Блакитна кнопка * /#navigationMenu .about {background-position:-38px 0-}#navigationMenu .about: hover {background-position:-38px -39px-}#navigationMenu .about span {background-color:# 1e8bb4-color:# 223a44-text-shadow:1px 1px 0 # 44a8d0-}/ * Помаранчева кнопка * /#navigationMenu .services {background-position:-76px 0-}#navigationMenu .services: hover {background-position:-76px -39px-}#navigationMenu .services span {background-color:# c86c1f-color:# 5a3517-text-shadow:1px 1px 0 # d28344-}/ * Жовта кнопка * /#navigationMenu .portfolio {background-position:-114px 0-}#navigationMenu .portfolio: hover {background-position:-114px -39px-}#navigationMenu .portfolio span {background-color:# d0a525-color:# 604e18-text-shadow:1px 1px 0 # d8b54b-}/ * Фіолетова кнопка * /#navigationMenu .contact {background-position:-152px 0-}#navigationMenu .contact: hover {background-position:-152px -39px-}#navigationMenu .contact span {background-color:# af1e83-color:# 460f35-text-shadow:1px 1px 0 # d244a6-}

В останній частині коду ми визначаємо стилі для кожного елемента списку при наведенні. Для фону елементів списку використовується спрайт (одне зображення, з якого береться для кожного елемента списку потрібна частина). В архіві є PSD-файл, використовуючи Photoshop можна змінити меню так як вам подобається.

висновок

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

Успіхів!

джерело: tutorialzine.com

Поділися в соц мережах: