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

Аватара пользователя
SLITE
Сообщения: 203
Зарегистрирован: 01 янв 2010
    1.jpg

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


Один из списков будет в одиночестве (видно в демо), поэтому мы хотим, чтобы он занимал все место
view source
print?

Код: Выделить всё

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


Мы хотим, чтобы заглавия списков выделялись:
view source

Код: Выделить всё

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

Вернуться в «jQuery»