наверх





В этом примере мы создадим красивое анимационное увеличивающиеся меню, которое может красиво вписаться в дизайн сайта и оживить его.


Существует огромное количество различных менюшек для сайт, сейчас же я покажу вам, как создать простое, но в то же время красивое и анимационное горизонтальное меню.

При наведении на элемент с ссылкой в меню, она будет увеличиваться и менять свой цвет. Причем увеличиваться будет не мгновенно, а плавно. Это и есть анимация. В примере не будет никаких JS и т.п., меню будет создано лишь на CSS3, ну и на HTML, для разметки.

Для создания эффекта анимация было взято свойство transition, с помощью которого можно создавать плавные переходы от одного состояния в другое. Не стоит забывать, что в старых браузерах данное свойство не поддерживается и анимации не будет, все будет происходить мгновенно. Итак, начнем.

HTML



<div class="menu">
<a href="#">Url 1</a><a href="#">Url 2</a><a href="#">Url 3</a><a href="#">Url 4</a>
</div>


CSS



Оформим главный блок:

.menu {
background-color:#DBDBDB; /* Фон */
width:100%;    /* Ширина 100% */
text-align:center;    /* Расположение текста */
}


Начнем оформлять ссылки:

.menu a{
color:white; /* Цвет */
background-color:#468CFB;    /* Фон */
padding:10px;    /* Внутренний отступ */
font:16pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;    /* размер, семейство шрифта */
}


Если вы не знали, то лучше всего для кнопок создавать отступы, а не задавать им ширину и высоту. Ведь, если будет много текста, а ширина будет фиксированная, то он может выйти за пределы кнопки. А отступ - это самый выгодный вариант.

Теперь добавим свойства transition:

.menu a{
-webkit-transition:All 0.5s linear; 
-moz-transition:All 0.5s linear;
-o-transition:All 0.5s linear;
color:white; /* Цвет */
background-color:#468CFB;    /* Фон */
padding:10px;    /* Внутренний отступ */
font:16pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;    /* размер, семейство шрифта */
}


Теперь перейдем к псевдоклассу :hover:

.menu a:hover{
background-color:#679FFC; /* Фон */    
padding-top:15px;    /* Внутренний отступ */
padding-bottom:15px;    /* Внутренний отступ */
}


При наведении измениться лишь высота кнопки и её цвет. Да, можно сделать, что бы изменилась и ширина, добавив отступы со всех сторон:

.menu a:hover{
background-color:#679FFC; /* Фон */    
padding:15px;    /* Внутренний отступ со всех сторон */
}


Хотя кнопка будет немного притормаживать. Но все равно, такой вариант тоже неплохой.




Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.