3 830 Скрипты / Menu & Nav

Анимированное меню на CSS или jQuery


Очень симпатичное горизонтальное меню с прозрачными кнопками и анимацией расширения кнопки и уменьшения прозрачности.

CSS

Сначала разметим html:

<ul id="menu-css">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Контакты</a></li>
</ul>
Сначала создадим неупорядоченный список для которого установим стиль. Установим параметр display:inline; для элементов списка и заполним фон черным с непрозрачностью 20% (CSS значение 0.2), добавим box-shadow и круглые углы border-radius:15px, сделав кнопки округлыми. Для непрозрачности цвета фона будем использовать RGBA(). При наведении курсора мыши на кнопку у нас будет увеличиваться padding (отступ) и прозрачность на 50% (CSS значение 0.5) и при клике будем уменьшать прозрачность на 10% (CSS значение 0.1).
#menu-css li a:hover {
    background: rgba(0,0,0,0.5);
    padding: 5px 25px;
}
#menu-css li a:active {
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
    box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
}

Пока что у нас получились просто хорошие кнопки, но без анимации. А без неё мы не увидим переходы прозрачности и эффекты увеличения. В данном случае каждая кнопка - это элемент <a> - на этот тег мы и поместим анимацию.

#menu-css li a {
    /* Animation (Webkit, Gecko & Mozilla) */
    -webkit-transition-duration: 0.20s;
    -webkit-transition-timing-function: ease-out; 
    -moz-transition-duration: 0.20s;
    -moz-transition-timing-function: ease-out;
}
-webkit - для webkit браузеров и -moz - для Мозилла браузеров. Параметр transition-duration отвечает за продолжительность перехода и параметр transition-timing-function - как будет проходить анимация. У нас анимация в 0,2 секунды с функцией ease-out.
Вот полный CSS стиль:

JS

Теперь сделаем тоже самое, но конечно, с более плавной анимацией, на jQuery.
Мы будем заменять CSS анимацию функцией $.animate(). Для поддержки RGBA используем плагин jQuery Color.

Скачать 711Загрузок 64,59 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи