Горизонтальное меню «Раздвижные двери»

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

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

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

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

<style type="text/css">
#slidetabsmenu {
float: left;
width: 100%;
font-size: 90%;
line-height: normal;
border-bottom: 1px solid gray;
}

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

#slidetabsmenu ul{
list-style-type: none;
margin: 0;
margin-left: 10px;
padding: 0;
}

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

#slidetabsmenu a {
float: left;
background: url(img/tab-left.gif) no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
text-decoration: none;
}

#slidetabsmenu a span {
float: left;
display: block;
background: url(img/tab-right.gif) no-repeat right top;
padding: 3px 14px 3px 5px;
font-weight: bold;
color: #3B3B3B;
}

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

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

#slidetabsmenu #current a {
background-position: 0 -125px;
}

#slidetabsmenu #current a span {
background-position: 100% -125px;
color: black;
}

#slidetabsmenu a:hover {
background-position: 0% -125px;
}

#slidetabsmenu a:hover span {
background-position: 100% -125px;
}
</style>

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

<div id="slidetabsmenu">
  <ul>
<li><a href="#" title="Главная"><span>Главная</span></a></li>
<li id="current"><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>	
<li><a href="#" title="Контакты"><span>Контакты</span></a></li>
  </ul>
</div>

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

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

Пока! L.M.