Анимированное CSS3 горизонтальное навигационное меню

В этой статье показано, как создать анимированное горизонтальное меню с помощью CSS3. Основные особенности этого навигационного меню в том, что наше фоновое изображение будет плавно меняться при наведениии курсора мыши на ссылку (цвет зависит от положения фонового изображения), также я применил свойство transition, для того чтобы создать анимацию. Все это в сумме показывает нам сильные стороны CSS3, и что в дальнейшем css вполне может заменить, в определенных местах, javascript. Как вы знаете свойство transition пока, к сожалению, поддерживается только Safari и Chrome.

Для начала создадим неупорядоченный список с id="menu" из пяти элементов, в которых расположим ссылки.

HTML

<ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
</ul>

Фоновое изображение используется одно:

Добавим стили для создания меню, включая свойство transition.

CSS

#menu li {
 display: inline;
 list-style: none;
 padding: 0;
         }

#menu li a {
 
border: 1px solid white;
padding: 15px 20px 15px 20px;
text-decoration: none;
color:black;
margin-left: -5px;
/* Фон для анимации */
background-image: url('image.jpg');
/* Выравниваем фоновое изображение по левому краю */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Анимация с  transition для Firefox (еще не поддерживается) */
-moz-transition: all 0.8s ease-in-out;
/* Анимация с  transition для  Opera )*/
-o-transition: all 0.8s ease-in-out;
          }

При наведении курсора мыши на элемент благодаря свойству css3 transition фоновое изображение плавно и красиво меняет свое положени. Элементы списка будут менять свои свойства в течение 0,8 секунд.

CSS

#menu li a:hover {
 color: white;
 /* Align the background image position of the background to the right*/
 background-position:right;
            }

По материалам сайта www.admixweb.com Анимированное CSS3 горизонтальное навигационное меню.