Все для веб-дизайнера
Как создать анимированное меню для сайта
Несомненно навигация на сайте является важнейшей его частью, с помощью которой пользователь может легко осуществить путешествие по ресурсу в поисках необходимой информации. Но зачастую навигация скучна и однообразна, при этом не привлекает взор посетителя, а это весьма плохо, ведь он может упустить ценную информацию, да и вам это не выгодно, ведь сайт живет за счет просмотров и новых посетителей. В данном уроке мы рассмотрим как можно стилизовать обычное, скучное меню в более живой, анимированный вариант.
Задумка данного меню состоит в том, что изначально оно выглядит как обычная невзрачная навигация, но при наведении курсора мыши происходит сдвиг по оси подпунктов навигации, при этом они загораются разной цветовой гаммой, что весьма красочно смотрится и притягивает взор. И так, давайте приступим.
Шаг 1. HTML
Для начала рассмотрим разметку. Данный HTML-код содержит неупорядоченный список. Каждый элемент списка является ссылкой с анкором. В тег span заключено название элемента меню.
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Как вы заметили, разметка достаточно простая, по этому детально на ней останавливаться не стоит. Перейдем к следующему шагу.
Шаг 2. CSS
Для каждого элемента мы используем значение ширины в 25%, что позволяет позиционировать четыре элемента меню в каждом ряду. Текст каждого элемента списка выравниваю по центру.
|
1 2 3 4 5 6 |
.main-ul li { float: left; position: relative; width: 25%; text-align: center; } |
Теперь необходимо позиционировать каждый тег анкора и задать нулевое значение для text-decoration. В качестве основного цвета мы используем прозрачный цвет чернго. Также, к этим элементам планирую добавить эффекты переходов CSS3.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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(000, 000, 000, 0.2); -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } |
В элементе span мы будем использовать шрифт «Kotta One» размером и весом в 20px и 700 соответственно. При этом зададим белый цвет шрифта для текста в позиции hover.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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; } |
Теперь добавим эффекты для каждого тэга анкора в списке путем изменения фонового цвета. Таким образом, когда пользователь подведет курсор к каждому элементу меню из списка, его фоновый цвет изменится. Также, мы добавим эффекты преобразований CSS3 относительно вращения на 3 градуса.
|
1 2 3 4 5 6 7 |
.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); } |
Теперь повторим этот шаг по отношению ко всем элементам списка, применив понравившийся вам фоновый цвет.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.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); } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 09.08.2012 в 20:47, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
