—»     —»   Эффект наложения в меню посредством jQuery
  Раздел: Меню и Навигация, Руководства   Нет комментариев  

Эффект наложения в меню посредством jQuery



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

Эффект наложения в меню посредством jQuery

Итак, давайте начнём!

Разметка

Структура HTML будет состоять из основного div’а-оболочки меню, который будет содержать в себе само наложение и неупорядоченный список с пунктами меню. Само же меню будет оснащено ссылкой и элементом 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&#225;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’ы субменю в самом начале всего меню, нам нужно «подтолкнуть» каждый div дальше влево, т.е. у нас должно получиться отрицательное значение выравнивания по левой стороне (уменьшение на 112 пикселей).

Давайте перейдём к стилю.

CSS-код

Убедитесь, что вы сбросили все параметры стилей (нам не нужно, чтобы какой-нибудь браузер здесь определил отступы или наполнение в списке.) Начнём с покрытия всего тела документа. Это будет простой div с изначальным параметром плотности на нуле.

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

Позиция будет выставлена фиксировано, так как нам надо, чтобы этот div всегда выравнивался по левому верхнему краю, тем самым заполняя весь экран.
У основного списка меню будет следующий стиль:

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

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

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 основному ul мы добавим класс «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;
}

Вот и вся стилизация! Давайте перейдем к работе с эффектами, реализованными посредством jQuery.

javascript-код

Основная идея заключается в том, чтобы появлялось наложение, которое бы покрывало всё на странице, за исключением меню. Мы гарантируем, что наложение останется под меню, так как мы расположили его до меню в структуре кода HTML. И наложение будет поверх всего остального, так как в структуре 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.0, а к оболочке будет добавлен класс «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();
})

Вот и всё! Надеемся, что вам понравилась статья, и вы найдете применение данной технике.

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, jQuery
Опубликовал Mysterious Master   Прочитано (раз): 6994   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930