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

CSS3 эффекты для меню


Анимируем меню, используя свойства css3 не прибегая к помощи jQuery.

Пример 1 - css3 transition

HTML

Разметка простая - неупорядоченный список со ссылками внутри. К li элементам применен класс .animation, с помощью которого и будем анимировать наши ссылки:

    <ul id="panel">
        <li><h3>МЕНЮ</h3></li>
        <li class="animation"><a href="#">Ссылка 1</a></li>
        <li class="animation"><a href="#">Ссылка 2</a></li>
        <li class="animation"><a href="#">Ссылка 3</a></li>
        <li class="animation"><a href="#">Ссылка 4</a></li>
        <li class="animation"><a href="#">Ссылка 5</a></li>
    </ul>

CSS

В дополнение к внешнему виду самого меню, мы устанавливаем свойство transition и translateX, которые анимируют элемент меню, как только вы наводите курсор на ссылку:

Второй пример - css3 transition

HTML

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

    <ul id="paneltwo">
        <li class="mask"><h3>МЕНЮ ></h3></li>
        <li class="linkOne"><a href="#">Ссылка 1</a></li>
        <li class="linkTwo"><a href="#">Ссылка 2</a></li>
        <li class="linkThree"><a href="#">Ссылка 3</a></li>
        <li class="linkFour"><a href="#">Ссылка 4</a></li>
        <li class="linkFive"><a href="#">Ссылка 5</a></li>
    </ul>

CSS

Благодаря элементу с классом mask мы можем скрыть позади него ссылки меню. У каждой ссылки есть свое уникальное свойство translateX и свойство delay (задержки), чтобы создать хороший эффект. В качестве альтернативы, можете использовать эффект cubic-bezier, вместо ease-in-out.

Третий пример - css3 animation и css3 transition

HTML

Последний пример идентичен по разметке со вторым примером, отличия в комбинации css3 свойств: animation и transition.

    <ul id="panelthree">
        <li class="mask"><h3>МЕНЮ ></h3></li>
        <li class="linkAnimationOne"><a href="#">Ссылка 1</a></li>
        <li class="linkAnimationTwo"><a href="#">Ссылка 2</a></li>
        <li class="linkAnimationThree"><a href="#">Ссылка 3</a></li>
        <li class="linkAnimationFour"><a href="#">Ссылка 4</a></li>
        <li class="linkAnimationFive"><a href="#">Ссылка 5</a></li>
    </ul>

CSS

Магии CSS нет предела. Мы создали для каждой ссылки уникальный класс, чтобы присвоить различные значения delay (задержки). Создали уникальную css3 animation для каждой ссылки, которая будет выполняться согласно параметру delay её класса. Также сделали обратную анимацию с использованием css3 transition, которая к сожалению будет работать только в Firefox, в то время, как в Safari и Chrome элемент возвратится в исходное состояние без анимации.

Скачать 910Загрузок 2,09 Kb
Демо

Комментарии

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

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