Горизонтальное корпоративное меню на CSS

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

Это голубое корпоративное меню использует технику раздвижных дверей, чтобы создать отдельные пункты меню. Оно работает прекрасно на белом фоне, а на тёмном фоне дополнительно появляется белая тень, что придаёт этому меню ещё больше привлекательности.

Демо-пример

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

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

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


<style type="text/css">
#tabs {
	float: left;
	width: 100%;
	font-size: 93%;
	line-height: normal;
	border-bottom: 0px solid #666;
	margin-bottom: 1em; /*margin between menu and rest of page*/
	overflow: hidden;
	}

#tabs ul {
	margin: 0;
	padding: 10px 10px 0 0px;
	list-style: none;
	
	}

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

#tabs a {
	float: left;
	background: url("img/left.png") no-repeat left top;
	margin: 0;
	padding: 0 0 0 6px;
	text-decoration: none;
	}

#tabs a span {
	float: left;
	display: block;
	background: url("img/right.png") no-repeat right top;
	padding: 6px 15px 4px 6px;
	margin-right: 2px;
	color: #FFF;
	}

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

/* End IE5-Mac hack */
#tabs a:hover span {
	}

#tabs a:hover {
	background-position: 0% -42px;
	}

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

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


<div id="tabs">
  <ul>
    <li><a href="#"><span>Главная</span></a></li>
    <li><a href="#"><span>CSS</span></a></li>
    <li><a href="#"><span>JavaScript</span></a></li>
    <li><a href="#"><span>Программы</span></a></li>
    <li><a href="#"><span>Хостинг</span></a></li>
    <li><a href="#"><span>FAQ</span></a></li>
  </ul>
</div>

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

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

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

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

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

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