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

Простое, красочное и элегантное вертикальное меню анимированное с помощью CSS3.

HTML

         <ul class = "nice-menu">
           <li class = "orange"><a href = "">Главная</a></li>
           <li class = "red"><a href = "">О нас</a></li>
           <li class = "green"><a href = "">Портфолио</a></li>
           <li class = "blue"><a href = "">Блог</a></li>
           <li class = "bright"><a href = "">Контакты</a></li>
           <li class = "red"><a href = "">Помощь</a></li>
         </ul>

CSS

Стили меню вместе в анимацией находятся в файле nice-menu.css (в исходниках).

Можно выбрать из двух вариантов анимации. Это по умолчанию эффект ease-in и ease-out и эффект bounce-in и bounce-out.

Для использования второго эффекта, нужно просто добавить класс bounce:

 <ul class="nice-menu bounce"></ul> 

Есть ещё один дополнительный класс tight, который удаляет пробел между элементами списка:

<ul class="nice-menu tight"></ul>