Здравствуйте, дорогие читатели – Sozdaiblog.ru!

Сегодня мы рассмотрим, как украсить с помощью CSS горизонтальное меню Вашего сайта.

Мы создадим своеобразный эффект скольжения картинки при наведении курсора мыши на один из пунктов меню.

Как и что мы будем делать.

Для начала мы создадим несколько пунктов меню, к которым привяжем ссылки перенаправления и необходимые изображения:

Затем, всё это дело разместим в любое необходимое место на Вашем сайте, желательно между тегами <body></body>:

 

<ul class="mh-menu">

<li><a href="Ссылка"><span>Art Director</span> <span>Henry James</span></a><img alt="image01" src="Путь к фото" /></li>

<li><a href="Ссылка"><span>Production Coordinator</span> <span>Francis Morgan</span></a><img alt="image02" src="Путь к фото" /></li>

<li><a href="Ссылка"><span>Sound</span> <span>Kevin Schneider</span></a><img alt="image03" src="Путь к фото" /></li>

<li><a href="Ссылка"><span>Casting</span> <span>Benjamin Zakalis</span></a><img alt="image04" src="Путь к фото" /></li>

</ul>

 

Далее скачиваем архив  с исходными файлами, копируем CSS стили наиболее понравившегося эффекта (style1, style, или style3) и добавляем их в основной файл стилей Вашего ресурса.

Чтобы CSS меню красиво вписалось в дизайн Вашего сайта, отредактируйте необходимые атрибуты скопированных стилей, изменив размер, цвет и шрифт на свой вкус.

 

CSS эффект для Горизонтального меню

ДЕМО СКАЧАТЬ

Теперь у Вас есть замечательный выдвижной эффект. Надеюсь, что он Вам понравился. В ближайшее время Вас ждут новые необычные эффекты, которыми мне не терпится поделиться.

Ну, а на сегодня это всё. До новых статей…

С уважением, Денис Черников!