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

Меню с эффектом наложения на jQuery В этом уроке мы создадим простое меню, которое будет выделяться из всей страницы, при наведении на него курсора мыши, затемняя всю остальную часть страниц, при этом само меню будет оставаться незатемнённым, а под-меню будет будет «выезжать» из-под него. «Этот эффект мы воссоздадим используя jQuery.

Разметка

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

<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>

Каждый список в под-меню необходимо выровнять по левому краю и расположить их в один ряд. Поскольку под-меню должно выводиться поверх элементов страницы, то его положение должно быть задано в абсолютных координатах, но поскольку каждый список в под-меню должен быть расположен внутри под-меню и должны быть выстроены в один ряд, то их положение необходимо задать в относительных координатах, относительно под-меню.

Стили

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

Начнём со слоя наложения, который будет затемнять остальную часть страницы.

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

Позиция данного слоя является фиксированной т.е. он всегда будет на экране монитора, вне зависимости от прокрутки страницы.

Главное меню будет иметь следующий стиль:

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

«Прижимаем» меню к левому краю, оставляя отступ 40 пикселей слева и 30 сверху. Теперь рассмотрим следующий очень важный момент — позиционирование элементов списка.

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;
}

В нашем JavaScript коде мы добавим класс «hovered» на элементы главного меню, благодаря чему, при наведении курсора мыши на элемент, фон элемента будет сменяться на белый:

.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 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%;
}

Если же внутри под-меню у нас не один список, то мы задаём им ширину в 150 пикселей, что позволяет нам разместить до трёх списков в один ряд.

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;
}

Работу со стилями мы закончили. Теперь перейдём к созданию эффектов с помощью javascript фреймворка jQuery.

Javascript

Основная идея заключается в том, чтобы затемнить всю страницу, за исключением меню. Слой наложения всегда будет поверх страницы, но под меню, потому, что в html-коде он идёт после всего, но раньше меню. К тому же, здесь нам помогает свойство z-index задающее положение элементов по оси z (направленна к нам, относительно плоскости монитора).

Начнём с того, что зарезервируем некоторые элементы.

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

Когда мы наводим курсор мыши на один из элементов главного меню, то к соответствующему элементу присваиваются классы «selected» и «slided». В этот момент один соответствующий слой под-меню выезжает, а остальные остаются невидимыми, для этого мы даём очень большое значение свойству z-index данного слоя. Когда мы убираем курсор мыши с элемента главного меню, то класс «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');
});

Класс «selected» необходим для оформления, а вспомогательный, в данном случае, класс «slided» лишь для идентификации элемента, находящегося в данный момент времени в раскрытом состоянии.

После наведения курсора мыши на меню, мы устанавливаем прозрачность слоя наложения равной 60% и добавляем класс «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();
})

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

Демонстрация работы | Скачать.

Данная статья является моим переводом с обработкой статьи с сайта tympanus.net.
______________________
Если вы любите посидеть вконтакте, то наверняка вы уже слышали фразы в свою сторону типа: «Опять ни черта не делал — весь день вконтакте онлайн!». Тогда вам в помощь статусы про обман — специальный скрипт для Opera 9, позволяющий сидеть вконтакте offline.

Меню с эффектом наложения на jQuery: 2 комментария

  1. Доброго времени суток! Уважаемый автор, я недавно начал работать с версткой сайта, и никогда не работал с jquery(только Aptana Studio и phpDesigner). Скажите пожалуйста, можно ли повторить то же самое, только в том же… блокноте, скажем?

    1. Это можно повторить в любом текстовом редакторе. ХТМЛ — это просто «код для браузера». А браузеру не важно, где вы его напишите.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *