Loading





Форекс с Альпари

eTXT




Анкетка


Горизонтальное меню на 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.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка