Горизонтальное меню «Светящиеся Вкладки»

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

В меню «Светящиеся Вкладки» используется технология «Раздвижные Двери» и фоновое изображение, которое подчеркивает контур с вкладками. Меню смотрится изысканно и профессионально.

Демо-пример

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

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

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


<style type="text/css">
    
#glowingtabs{
width: 80%;
font-size: 90%;
line-height: normal;
overflow: hidden;
border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/
padding-left: 130px;
}

#glowingtabs ul{
float: left;
list-style-type: none;
margin: 0;
margin-left: 5px; /*Left offset of entire tab menu relative to page*/
padding: 0;
}

#glowingtabs li{
display: inline;
margin: 0;
padding: 0;
}

#glowingtabs a{
float: left;
background: url(img/glowtab-left.gif) no-repeat left top;
margin: 0;
margin-right: 5px; /*spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}

#glowingtabs a span{
float: left;
display: block;
background: url(img/glowtab.gif) no-repeat right top;
padding: 4px 12px 2px 3px;
font-weight: bold;
color: #3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#glowingtabs a span {float:none;}
/* End IE5-Mac hack */

#glowingtabs a:hover span {
color: black;
}

#glowingtabs #current a{ /*Selected Tab style*/
background-position: 0 -82px; /*Shift background image up to start of 2nd tab image*/
}

#glowingtabs #current a span{ /*Selected Tab style*/
background-position: 100% -82px; /*Shift background image up to start of 2nd tab image*/
color: black;
}

#glowingtabs a:hover{ /*onMouseover style*/
background-position: 0% -82px; /*Shift background image up to start of 2nd tab image*/
}

#glowingtabs a:hover span{ /*onMouseover style*/
background-position: 100% -82px; /*Shift background image up to start of 2nd tab image*/
}
</style>

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


<div id="glowingtabs">
<ul>
<li id="current"><a href="#" title="Главная"><span>Главная</span></a></li>
<li><a href="#" title="CSS библиотека"><span>CSS библиотека</span></a></li>
<li><a href="#" title="Форум"><span>Форум</span></a></li>
<li><a href="#" title="Программы"><span>Программы</span></a></li>
<li><a href="#" title="Скрипты"><span>Скрипты</span></a></li>
</ul>
</div>

Нижнюю линию, а это нижняя граница контейнера glowingtabs, Вы можете удалить в CSS (вместо 1px поставить 0) в строке:

border-bottom: 1px solid #7e9fff;

Можно рассмотреть и второй вариант - увеличить ширину линии до нескольких пикселов. Возможно, кому-то так понравится.

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

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

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

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

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

Служба поддержки