JavaScript и jQuery

Меню с эффектом наложения на 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.

Новости

Новое оформление блога

Новое оформление блога Свершилось! :mrgreen: Я закончил работу над новым оформлением блога и могу теперь показать его вам. Конечно, возможно ещё остались глюки или косяки, но о них прошу сообщать мне, чтобы я их исправил.

Сменить тему я решил 3 недели назад. Да, с 1 февраля прошло много времени, но не всё это время я работал над темой, а только 2 дня, ведь кроме блога у блоггеров есть и другие заботы (спалил тему :mrgreen: вы наверное думали, что блоггеры живут в блоге и кроме блога у них ни чего нет). (далее…)

Новости

Редизайну быть!

Редизайну быть! Захотелось мне что-то дизайн блога изменить, давно ещё захотелось, но не как руки не доходили, а сейчас вроде как дошли.:mrgreen:

Делать новый дизайн я пока не планирую, но внести некоторые изменения в текущий собираюсь, хотя если появиться какая-либо хорошая идея, то может и полностью новый дизайн сделаю. Но, прежде, чем делать какие-либо измениня — я бы хотел спросить у вас, посетителей блога, что вам нравиться и не нравиться в текущем дизайне? Что надо изменить и доработать, а что сделано хорошо и лучше оставить в новом переделанном дизайне? Прошу всех читателей ответить на эти 2 вопроса в комментариях к данному посту.

(далее…)

Полезное

Думай о других!

Несколько месяцев назад, когда свободного времени было больше, чем сейчас , я получил очередной заказ html-вёрстки одного макета в формате PSD. Однако, макет оказался ужасным.

Я сам не дизайнер и судить других дизайнеров не собираюсь, а тем более не обсуждаю дизайн заказчиков. А что же тогда было столь ужасного в этом макете? Его устройство! Посмотрите сами, как были организованы слои. Названия некоторых слоёв вообще написанны на Китайском языке — тут дизайнер отжог.
(далее…)

Новости

Вновь ре-дизайн

Дизайн — это внешний облик сайта, его лицо. Дизайн — это самое первое, что увидит пользователь зайдя на сайт. Поэтому, дизайн должен быть не плохим, чтобы не «спугнуть» посетителя, а даже удобным, чтобы спустя некоторое время нахождения на вашем сайте, пользователь не «убежал» отдыхать от «ядовито зелёного текста на чёрном фоне». Также, оформление сайта можно сравнить с одеждой человека, а ходить в одной и той же одежде несколько лет надоест, поэтому и дизайн сайта хорошо бы менять спустя некоторое время.

1 ноября будет ровно год, с момента открытия портала LiveVids.ru. За всё время своего существования, он меняет свой облик уже второй раз, в среднем каждый пол-года. Однако, это не говорит о том, что в конце зимы — начале весны на «LiveVids» вновь произойдёт ре-дизайн. Я бы не стал его делать и в этот раз, но пришлось из-за некоторого неудобства, теперь уже прошлого шаблона, подробнее об этом позже.

Пять дней я мучился рисуя новый дизайн для него. Нарисовал — не нравиться, ctrl+a, delete и всё заново. Многим я уже говорил, что я не дизайнер и у меня обычно одна проблема — «реализовать могу многое, а вот придумать нет». Конечно, я не совсем «идиот» :mrgreen: и могу что-либо красивое, но получается это редко, наверное практики мало. В результате, я наконец-то сделал то, что мне понравилось.

Теперь подробно расскажу о том, что я изменил и почему.

  1. Сделал дизайн в светлых тонах — многие предлагали это сделать. Сделал так, как хотели посетители, да и самому так больше нравиться.
  2. «Вернулся» к выводу контента в одну колонку, вместо двух в прошлом шаблоне, в результате чего, стало большое места в сайдбаре, чтобы вывести дополнительную информацию на главной и других страницах. В прошлой теме сайдбар был футером, а делать его в «3 этажа» не хотелось.
  3. Недавно я решил изучить jQuery, поэтому навигационное меню сделал в использованием данного фреймворка, а именно — всплывающие подсказки, при наведении на тот или иной пункт меню.

Посмотреть на результаты моего старания вы можете перейдя по ссылке — LiveVids.ru — видео концерты онлайн. Ну и как вам? Не зря я «убил» почти неделю свободного времени?

Кстати, не только я сделал ре-дизайн. Креативный кот тоже не дремлет.

После ре-дизайна, дальнейшие мои планы — заняться его продвижением, а то посещаемость ужасная. Только вот, когда раскручу, возможно понадобиться новый хостинг, а лучше VPS, т.к. вордпресс много требует, при хорошей посещаемости. Но производить перенос сайта на другой хостинг я не боюсь, не в первой уже, да и всё самое страшное уже пережил, когда чуть не «убил» свой блог. :mrgreen:

Новости

Смена дизайна

Сверстал новый дизайн. Не веб 2.0, но для блога пойдёт. Обновил движок до последней версии и прикрутил парочку новых плагинов. Оцениваем тему, а также сообщаем обо всех глюках и проблемах обновлённого движка.