Горизонтальное меню с градиентом цвета

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Это простое, но профессионально выглядящее меню на CSS с использованием изображений. Границы между пунктами меню разделены белой линией. Стиль меню очень легко настроить в CSS.

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть меню:


<ul class="solidblockmenu">
<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>

В демо-примере первой ссылке присвоен класс current, поэтому эта ссылка (Главная) уже находится под воздействием параметров свойства .current. Если не желаете использовать такой вариант, просто удалите из первой ссылки часть кода class="current" и в CSS удалите свойство .current из строки:

.solidblockmenu li a:hover, .solidblockmenu li .current


Используемые изображения:
изображение
изображение

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором расположено меню.

Впишите свои URL-лы и названия ссылок.

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.


Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика