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

В этом уроке мы создадим простое меню, которое будет выделяться (весь экран, кроме самого меню, будет затемнен - эффект наложения) при наведении на него мышкой. Подобное можно сделать благодаря jQuery.

Поехали!

Разметка

Структура HTML будет состоять из главного оберточного слоя для меню, который будет содержать наложение и неупорядоченный список элементов меню. Меню само по себе будет содержать непосредственно ссылку и элемент 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>

divы подменю будут содержать инлайновые стили позиционирования слева. Как Вы увидите при просмотре стилей, нам необходимо прописать это значение, так как мы хотим, чтобы подменю были позиционированы абсолютно. Но внутри отоносительно позиционированного контейнера. То есть, чтобы разместить все подменю в начале меню, нам необходимо "вытаскивать" каждый div больше влево, или же у нас будет значение left отрицательным.

Давайти посмотрим на стили!

CSS

Убедитесь, что для начала Вы сделаете сброс стилей (нам не нужны отступы браузеров по умолчанию). Начнем с наложения, которое по сути является простым слоем с изначальной прозрачностью 0.

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

}

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

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” к главному ul при наведении на него мышкой, чтобы мы могли поменять якоря на белый цвет.

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

}

Теперь черед jQuery.

JavaScript

Главная идея заключается в появлении наложения и затемнении всего экрана, кроме области меню. Наложению всего экрана будет под меню, так как оно было размещено ранее в коде. В свою очередь наложение остается поверх всего остального, так как идет перед структурой HTML. Таким образом, z-indexы в правильном порядке.

Для начала кешируем элементы:

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

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

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

При наведении на любой элемент меню, мы будем добавлять класс “slided” и “selected” к элементу. div подменю будет выезжать при этом, а другие (если были ранее открыты), наоборот, прятаться. Мы также придаем очень высокое значение 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” вспомогательных класс для идентификации "занятого" элемента.

Теперь позаботимся о наложении. Мы поменяем прозрачность до 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();

})

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

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

Сюньцзы

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
Перевел: Максим Шкурупий
Урок создан: 9 Февраля 2011
Просмотров: 54520
Правила перепечатки