Необычное меню с помощью CSS

Если Вы всегда хотели создать что-то немного другое, то этот урок для Вас. В этом уроке мы создадим меню с эффектом перекрытия. Вы поймете, как просто этого добиться.

Первый заключается в создании неупорядоченного списка, которое потом, с помощью CSS, станет нашим меню.

<ul id="navigation">
	<li><a href="#" class="one">1</a></li>
	<li><a href="#" class="two">2</a></li>
	<li><a href="#" class="three">3</a></li>
	<li><a href="#" class="four">4</a></li>
</ul>

Каждый элемент списка должен иметь свой класс. Это нам понадобится при создании стилей.

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

ul#navigation {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
}
ul#navigation li {
	margin: 0;
	padding: 0;
}
ul#navigation li a {
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	position: absolute;
	top: 0;
}

Применяя основные стили для наших меток, мы выделили области. Вы также можете заметить, что мы задали позицию для списка relative, то есть ссылки будут расположены на странице абсолютно, относительно элементов списка.

Теперь, когда все на месте, мы можем описывать вид для каждой ссылки. Ниже приводится изображение, как будет выглядеть наше меню.

Картинки для этого урока Вы можете скачать здесь. Все картинки для элементов списка, у меня, в PNG формате. Одна из картинок выглядит следующим образом:

Следующим шагом в создании навигации будет оформление каждого элемента. Вот где мы будем применять классы, какие задали в самом начале.

Для каждой ссылки необходимо установить высоту и ширину, фоновое изображение и свою позицию. Вы могли заметить, установки значения top:0, для наших ссылок, все элементы залезают друг на друга. В этом шаге мы также будем это исправлять.

ul#navigation li a.one {
	background: url('images/1.png') no-repeat;
	left: 0;
	height: 225px;
	width: 125px;
}
ul#navigation li a.two {
	background: url('images/2.png') no-repeat;
	left: 75px;
	height: 233px;
	width: 140px;
}
ul#navigation li a.three {
	background: url('images/3.png') no-repeat;
	left: 175px;
	height: 223px;
	width: 121px;
}
ul#navigation li a.four {
	background: url('images/4.png') no-repeat;
	left: 250px;
	height: 235px;
	width: 146px;
}

Вуалля! Теперь навигация должна выглядеть так, как мы планировали.

По-умолчанию меню стандартно, элемент списка 1 находится внизу и 4 находится в самом верху. Если Вы хотите это изменить, необходимо использовать CSS свойство z-index, с помощью которого можно задать положение элемента поверх другого. Например, если мы зададим для класса a.three значение z-index равное 2 (z-index: 2), то этот элемент будет находится поверх всех других ссылок.

Теперь приступим к созданию стилей при наведении на элемент списка. МЫ попробуем сделать, что наведенный элемент будет выступать поверх остальных. Для этого необходимо изменить значение top для класса a:hover.

ul#navigation li a:hover {
	padding: 0 0 20px 0;
	top: -20px;
}

Вы можете задать свойство для каждого элемента списка при наведении на него. В примере мы разберем только для элемента a.four. Сначала необходимо изменить фоновое изображение.

ul#navigation li a.four:hover {
	background: url('images/4-hover.png') no-repeat;
}

Теперь если Вы наведете на элемент списка, то увидите:

Вот и все! Надеюсь, Вам понравился урок.

ДОПОЛНЕНИЕ

Так как IE6 не понимает PNG формат, для каждого пункта необходимо добавить следующий код:

_background: none;
_filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src='images/4.png', sizingMethod='crop');

Ниже приведен пример кода в одном из элементов.

ul#navigation li a.four {
	background: url('images/4.png') no-repeat;
	left: 250px;
	height: 235px;
	width: 146px;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.
	AlphaImageLoader(src='images/4.png', sizingMethod='crop');
}

Спасибо за внимание!