Меню для сайта на jQuery, с эффектом наложения

Дата публикации: 2011-01-14

jquery меню

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

Перед тем, как мы приступим к созданию меню для сайта на jQuery, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Итак, давайте начнем!

Разметка

Структура HTML будет состоять из основного упаковщика меню div, содержащего наложение, и неупорядоченного списка для меню. Само меню получит ссылку и элемент div, как подменю в своих элементах списка. Каждый из элементов подменю будет содержать списки для колонок подменю, где каждый получит заголовок элемента списка:

<div class="oe_wrapper">
	<div id="oe_overlay" class="oe_overlay"></div>
	<ul id="oe_menu" class="oe_menu">
		<li>
			<a href="">Collections</a>
			<div>
				<ul>
					<li class="oe_heading">
						Summer 2011
					</li>
					<li><a href="#">Milano</a></li>
					...
				</ul>
				<ul>
					...
				</ul>
				<ul>
					...
				</ul>
			</div>
		</li>
		<li>
			<a href="">Projects</a>
			<div style="left:-111px;">
				...
			</div>
		</li>
		<li>
			<a href="">Fragrances</a>
			<div style="left:-223px;">
				<ul class="oe_full">
					<li class="oe_heading">
						Fashion Fragrances
					</li>
					<li><a href="#">Deálure</a></li>
					<li><a href="#">Violet Woman</a></li>
					<li><a href="#">Deep Blue for Men</a></li>
					<li><a href="#">New York, New York</a></li>
					<li><a href="#">Illusion</a></li>
				</ul>
			</div>
		</li>
		<li><a href="">Events</a>
			<div style="left:-335px;">
				...
			</div>
		</li>
		<li><a href="">Stores</a>
			<div style="left:-447px;">
				...
			</div>
		</li>
	</ul>
</div>

<li>

<a href="">Collections</a>

<div>

<ul>

Summer 2011

</li>

<li><a href="#">Milano</a></li>

...

</ul>

<ul>

...

</ul>

<ul>

...

</ul>

</div>

</li>

<li>

<a href="">Projects</a>

...

</div>

</li>

<li>

<a href="">Fragrances</a>

Fashion Fragrances

</li>

<li><a href="#">Deálure</a></li>

<li><a href="#">Violet Woman</a></li>

<li><a href="#">Illusion</a></li>

</ul>

</div>

</li>

<li><a href="">Events</a>

...

</div>

</li>

<li><a href="">Stores</a>

...

</div>

</li>

</ul>

</div>

У каждого из div’ов подменю будут назначены inline-стили для позиций слева. Посмотрев на стиль, мы увидим, что нужно установить это значение, если хотим, чтобы подменю было абсолютно позиционировано, но внутри относительно позиционированного контейнера. Так что для позиционирования всех div’ов подменю вначале всего меню нам нужно "оттащить" каждый div побольше влево, следовательно, так мы получим отрицательное левое значение для каждого div’а (уменьшение на 112px).

Давайте посмотрим на стиль.

CSS

Убедитесь сначала, что вы сбросили все стили (нам для списка не нужно никаких отступов или полей, определенных браузером). Мы начнем с наложения в теле (body), которое является простым div’ом с исходной непрозрачностью, установленной на 0:

.oe_overlay{
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

.oe_overlay{

background:#000;

opacity:0;

position:fixed;

top:0px;

left:0px;

width:100%;

height:100%;

}

Position будет установлен на fixed, так как нам нужно, чтобы он всегда оставался в левом верхнем углу, заполняя весь экран.

Список основного меню получит следующий стиль:

ul.oe_menu{
	list-style:none;
	position:relative;
	margin:30px 0px 0px 40px;
	width:560px;
	float:left;
	clear:both;
}

ul.oe_menu{

list-style:none;

position:relative;

margin:30px 0px 0px 40px;

width:560px;

float:left;

clear:both;

}

Вы, возможно, хотели бы применить его способность свободно перемещаться, если планируете его интегрировать куда-нибудь на свой сайт. Что действительно важно — так это расположение пунктов списка.

ul.oe_menu > li{
	width:112px;
	height:101px;
	padding-bottom:2px;
	float:left;
	position:relative;
}

ul.oe_menu > li{

width:112px;

height:101px;

padding-bottom:2px;

float:left;

position:relative;

}

Они будут позиционированы относительно, так, чтобы у нас были абсолютно расположенные элементы подменю.

Гиперссылка меню верхнего слоя получит следующий стиль, формирующий блок:

ul.oe_menu > li > a{
	display:block;
	background-color:#101010;
	color:#aaa;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:90px;
	height:80px;
	padding:10px;
	margin:1px;
	text-shadow:0px 0px 1px #000;
	opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#fff;
	color:#101010;
	opacity:1.0;
}

ul.oe_menu > li > a{

display:block;

background-color:#101010;

color:#aaa;

text-decoration:none;

font-weight:bold;

font-size:12px;

width:90px;

height:80px;

padding:10px;

margin:1px;

text-shadow:0px 0px 1px #000;

opacity:0.8;

}

ul.oe_menu > li > a:hover,

ul.oe_menu > li.selected > a{

background:#fff;

color:#101010;

opacity:1.0;

}

В свой JavaScript мы добавим к основному ul’у класс "hovered" так, чтобы при проведении мышью над меню можно было изменить все указатели на белые:

.oe_wrapper ul.hovered > li > a{
	background:#fff;
	text-shadow:0px 0px 1px #FFF;
}

.oe_wrapper ul.hovered > li > a{

background:#fff;

text-shadow:0px 0px 1px #FFF;

}

Элемент подменю сначала не будет виден, а выскальзывать станет тогда, когда мы проведем мышью над элементом списка верхнего слоя:

ul.oe_menu div{
	position:absolute;
	top:103px;
	left:1px;
	background:#fff;
	width:498px;
	height:180px;
	padding:30px;
	display:none;
}

ul.oe_menu div{

position:absolute;

top:103px;

left:1px;

background:#fff;

width:498px;

height:180px;

padding:30px;

display:none;

}

Стиль для ссылок внутри списков подменю:

ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul li a:hover{
	background:#000;
	color:#fff;
}

ul.oe_menu div ul li a{

text-decoration:none;

color:#222;

padding:2px 2px 2px 4px;

margin:2px;

display:block;

font-size:12px;

}

ul.oe_menu div ul li a:hover{

background:#000;

color:#fff;

}

Один из списков подменю будет одиночным, так что нам нужно, чтобы он занял все пространство:

ul.oe_menu div ul.oe_full{
	width:100%;
}

ul.oe_menu div ul.oe_full{

width:100%;

}

А если не одиночный, то нужно, чтобы ширина у него была 150px, и можно было разместить 3 скользящих элемента рядом:

ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 150px;
	margin-right:10px;
}

ul.oe_menu li ul{

list-style:none;

float:left;

width: 150px;

margin-right:10px;

}

Наконец, нам нужен заголовок списка подменю для выделения:

li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}

li.oe_heading{

color:#aaa;

font-size:16px;

margin-bottom:10px;

padding-bottom:6px;

border-bottom:1px solid #ddd;

}

И это все, что касается стилей! Давайте при помощи jQuery продолжим работать с эффектами.

Код меню сайта на jQuery

Основная идея состоит в том, чтобы появлялось наложение и затемняло на странице все, кроме меню. Мы гарантируем, что наложение находится под меню, потому что в структуре HTML мы поместили его перед меню. И наложение остается поверх всего остального, потому что полностью идет перед структурой HTML. Таким образом, z-индексы располагаются в нужном порядке. Продумайте это, если интегрируете куда-либо это меню.

Сначала давайте кэшируем некоторые элементы:

var $oe_menu		= $('#oe_menu');
var $oe_menu_items	= $oe_menu.children('li');
var $oe_overlay		= $('#oe_overlay');

var $oe_menu = $('#oe_menu');

var $oe_menu_items = $oe_menu.children('li');

var $oe_overlay = $('#oe_overlay');

При установлении функции hover любому пункту меню мы добавляем к ему классы "slided" и "selected". Соответствующий div подменю будет выскальзывать, а все прочие будут скрываться. Мы также передаем очень высокий z-индекс текущему подменю. При убирании с него мыши мы удаляем класс "selected":

$oe_menu_items.bind('mouseenter',function(){
	var $this = $(this);
	$this.addClass('slided selected');
	$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
		$oe_menu_items.not('.slided').children('div').hide();
		$this.removeClass('slided');
	});
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('selected').children('div').css('z-index','1');
});

$oe_menu_items.bind('mouseenter',function(){

var $this = $(this);

$this.addClass('slided selected');

$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){

$oe_menu_items.not('.slided').children('div').hide();

$this.removeClass('slided');

});

}).bind('mouseleave',function(){

var $this = $(this);

$this.removeClass('selected').children('div').css('z-index','1');

});

Класс "selected" нужен стилю, когда класс "slided" является вспомогательным, что позволяет нам определить, который из пунктов в данный момент используется.

Теперь мы позаботимся о наложении, определив, что происходит, когда мы вводим упаковщик всего меню. Мы постепенно изменим наложение до непрозрачности 0.6 и добавим к упаковщику класс "hovered", так что указатели останутся белыми:

$oe_menu.bind('mouseenter',function(){
	var $this = $(this);
	$oe_overlay.stop(true,true).fadeTo(200, 0.6);
	$this.addClass('hovered');
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('hovered');
	$oe_overlay.stop(true,true).fadeTo(200, 0);
	$oe_menu_items.children('div').hide();
}