Loading





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

eTXT




Анкетка


Горизонтальное меню на CSS с применением изображений

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

Достаточно простое, но функциональное меню на CSS с применением изображений. При наведении курсора мыши на отдельную ссылку меню, она изменяет цвет шрифта и оказывается в своеобразном цветовом поле.

Демо-пример Исходники (4.2 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


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

1. Скачайте архив с материалом, распакуйте в текущую папку на компьютере и проверьте работу меню, открыв в браузере файл demo.html. Если всё в порядке, загрузите файлы изображений в соответствующую папку сайта и расставьте коды.

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


<style type="text/css">
#menu li 
{
list-style-type: none;
display: inline;
}
#menu li a 
{
padding: 0 18px 0 0;
position: relative;
display: block;
float: left;
color: #000;
height: 39px;
font-family: arial;
text-transform: uppercase;
font-size: 14px;
margin: 0 5px 0 5px;
}
#menu li  b 
{
display: block;
height: 39px;
float: left;
padding: 10px 0 0 25px;
cursor: pointer;
font-weight: normal;
}
#menu li a:hover,
#menu li a:active,
#menu li a:focus
{
background-position: right 0px;
padding: 0 18px 0 0;
color: #fff;
background-image: url(img/menu_active_r.jpg);
text-decoration: none;
background-repeat: no-repeat;
}
#menu li a:hover b,
#menu li a:active b,
#menu li a:focus b
{
background-position: left 0px;
background-image: url(img/menu_active_left.jpg);
background-repeat: no-repeat;
}
</style>

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


<div id="menu">
<ul>
<li><a href="#"><b>Главная</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Контакты</b></a></li>
<li><a href="#"><b>FAQ</b></a></li>
</ul>
</div>

Меню очень простенькое, но может быть, кому-то понравится. Настройки можно менять в CSS.  Это всё. С уважением к вашему вниманию, L.M.


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




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







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