| ||||||
|
Горизонтальное меню на CSS с интерактивными пунктамиИнформация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров. Это горизонтальное меню на CSS с использованием двух фоновых изображений. При наведении курсора мыши выбранные пункты меню откликаются активностью, благодаря изображениям с градиентом цвета.
Установка на сайт1. Код в таблице внизу вставить в раздел head или файл стилей сайта: Для выделения текста сделайте щелчок мышью.Для увеличения окна, «подцепите» мышью правый нижний угол. 2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть меню:
<div class="indentmenu">
<ul>
<li><a href="#" class="current">Главная</a></li>
<li><a href="#">CSS-библиотека</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Галерея</a></li>
</ul>
</div>
Ширину меню (width) устанавливайте в CSS в свойстве .indentmenu ul{ в зависимости от ширины, занимаемой пунктами меню. В демо-примере первой ссылке присвоен класс current, поэтому эта ссылка (Главная) уже находится под воздействием параметров свойства .current. Если не желаете использовать такой вариант, просто удалите из первой ссылки часть кода class="current" и в CSS удалите свойство .current из строки:
.indentmenu ul li a:hover, .indentmenu ul li .current
Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором расположено меню. Впишите свои URL и названия ссылок. Спасибо, что посетили мой сайт. Пока! L.M. |
|||||
|