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

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

demosourse

Поехали!

Разметка

Структура 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
Просмотров: 53841
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 9 Февраля 2011 18:03
    notbot
    А где собсна эффект наложения!!??
  • 9 Февраля 2011 18:09
    СиротА
    Что-то я не понял чего хорошего в этом меню?
  • 9 Февраля 2011 18:18
    IKLO
    Не плохой код .
  • 10 Февраля 2011 01:23
    antosha
    классное меню, зачет
  • 10 Февраля 2011 06:37
    unframed
    Наш коллега Мери Лу делает красивые, но абсолютно бестолковые вещи.
  • 10 Февраля 2011 10:44
    Степан Пыжов
    Совет: сделать для данного меню (при использовании) время (хотяб 100мс) до появления основного эффекта, т.к. (лично меня) очень бесит, когда мышкой слегка задел меню, и всё поехало играться...
    • 10 Февраля 2011 12:55
      erlan
      Согласен...
  • 10 Февраля 2011 12:26
    kalisto
    Отличное меню - место на сайте экономит и легко раскрывается - стильное меню!!! Огромное спасибо - Вы всегда нас радуете именно тем, что нам нужно!!! http://ruseller.com для меня - это то, что ВСЕГДА ВОВРЕМЯ! Спасибо и всех благ Вам!
  • 11 Февраля 2011 14:06
    cbell
    Не очень.
  • 11 Февраля 2011 14:18
    ZERO01
    Horoshoe menyu.
  • 4 Апреля 2011 10:57
    AniPlay
    У меня возникла проблема! Когда в меню пишу свои пункты на русском языке, то они не отображаются. Английский норм показыввает. Может кто подсказать в чем проблема?
    • 19 Июня 2013 09:50
      10813
      Аналогичная проблема с русским языком в Opera.
      • 10 Февраля 2015 21:46
        nikfire
        Добрый день. Кто-нибудь решил проблему с русским языком?
    • 10 Февраля 2015 21:56
      nikfire
      Нашел. Дело в шрифтах. В примере используются специальные шрифты, которые подключаются через javascript. Удалить из своего кода следующие строки: <script type="text/javascript"> Cufon.replace('ul.oe_menu div a',{hover: true}); Cufon.replace('h1,h2,.oe_heading'); </script>
  • 10 Апреля 2011 18:45
    m_hamlet
    Спс за урок. Вообще-то, где-то на сайтах я это увидел, и был на русском языке... Только перевод был не так, как здесь... Наверное, источник один и тот же. В любом случае, спасибо.
  • 18 Апреля 2011 21:56
    in3gan
    Красота) Мне лично оч понравилось
  • 10 Февраля 2015 21:47
    nikfire
    В подменю текст на русском языке не показывает. В чем проблема?
^ Наверх ^