Наши контакты:
  • Адрес:г. Винница, Пирогова 39 (ТЦ Анастасия - 2-й этаж)
  • Адрес:г. Киев, Краснозвездный просп., 99
  • (Карта проезда)
  • Телефоны:
  • Винница: (096) 662-27-41
  • Киев: (097) 756-40-75
  • Москва: +7 (499) 346 72 37
  • Нью-Йорк: +1 (516) 321-18 56
  • Почта: info@abcname.net
  • ICQ: 267 581 889
  • Skype:abcname.company
  • Facebook:www.fb.com/ABCname
  • YouTube:www.youtube.com/user/abcnamecompany
Обратная связь:
 
09666-22-741Не звоните ночью, уважаемые!
 
Живое меню с CSS3
Сейчас мы покажем вам, как разнообразить ваше меню, добавив аккуратный эффект при наведении на него. Идея состоит в том, чтобы плавно показывать изображение при наведении курсора на пункт меню.

Каждый пункт меню будет иметь якорь, содержащий два пролета и изображения:
 Далее стилизуем наш список. Мы дадим .mh-menu цвет фона RGBA (255 255 255, 0,8). А при наведении курсора меняем цвет фона на RGBA (225 239 240, 0.4):
 Второй шаг сделать все елементы списка своим другим цветом при наведении:

Изображение будет появлятся с правой стороны, поэтому на начальном этапе, оно будет находится слева. Мы также добавим для плавного перехода прозрачность  от 0 (начальное значение) до 1:
 Вот и все, мы имеем хороший выдвигающейся эффект! Убедитесь, что z-индекс якоря был выше, чем изображение, чтобы оно находилось под якорем, а не на нем. Кроме того, мы можем сделать цвет фона якоря непрозрачным при наведении курсора мыши, то есть полностью белым (демо 2), или цвета всех елементов списка разным (демо-3).