Как украсить горизонтальное меню с помощью CSS?
Здравствуйте, дорогие читатели – 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 эффект для Горизонтального меню
Теперь у Вас есть замечательный выдвижной эффект. Надеюсь, что он Вам понравился. В ближайшее время Вас ждут новые необычные эффекты, которыми мне не терпится поделиться.
Ну, а на сегодня это всё. До новых статей…
С уважением, Денис Черников!
-
Как сделать форму обратной связи для сайта?
-
Каковы цели и задачи отдела маркетинга?
-
Seo оптимизация статей!
- Топ комментаторов на WordPress без плагинов!
-
Как Заработать на блоге с помощью Статей на Заказ?
- Admin Bar WordPress — вставка и удаление ссылок!
-
Как вспомнить все забытые Пароли и Логины?
-
Угловой баннер с сюрпризом!
-
Как сделать Слайд-Шоу из фотографий с помощью CSS3?
- Как заставить ссылки дрожать?
