Генератор форм

Для веб-мастера

AutoClicker - Автокликер для популярных тапалок в телеграм, который запускается на вашем ПК в браузере.
CheckTrust - сервис проверки качества сайтов. Экономия до 70% на аренде ссылок.
GoGetLinks - популярная система для получения качественных ссылок в обзорах с размещением навсегда.
Etxt.RU - биржа статей.
FastVPS - качественный VPS/VDS хостинг в германии.
Roistat - система сквозной бизнес-аналитики.

Создание меню с эффектом затемнения на jQuery

Рейтинг:

Дата: 13 декабря 2010 Просмотры

25788

В этом уроке мы собираемся создать простое меню, которое будет выделяться, при наведении мыши на него, а вся страничка будет затемняться. Меню будет оставаться белым, а область подменю будет расширяться. Мы создадим этот эффект, используя JQuery.

Выглядеть это будет так!

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

Разметка

Структура HTML будет состоять из основной DIV оболочки для меню, которое будет содержать слой наложения (затемнения) и неупорядоченный список элементов меню. Элементы меню будут ссылками, каждый из элементов меню будет содержать списки для столбцов подменю, в котором каждый будет иметь заголовок элемента списка:

<div class="oe_wrapper">
   <div id="oe_overlay" class="oe_overlay">&nbsp;</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>
            <li><a href="#">Paris</a></li>
            <li><a href="#">Special Events</a></li>
            <li><a href="#">Runway Show</a></li>
            <li><a href="#">Overview</a></li>
         </ul>
         <ul>
            <li class="oe_heading">Winter 2010</li>
            *
            *
            <li><a href="#">Download</a></li>
         </ul>
         <ul>
            <li class="oe_heading">Categories</li>
            *
            *
            <li><a href="#">Evening</a></li>
         </ul>
         </div>
      </li>
      <li><a href="">Projects</a>
         <div style="left:-111px;"><!-- -112px -->
         <ul>
            <li class="oe_heading">Fashion Shows</li>
            *
            *
            <li><a href="#">London</a></li>
        </ul>
        <ul>
            <li class="oe_heading">Events</li>
            *
            *
            <li><a href="#">Model Workshops</a></li>
        </ul>
        <ul>
            <li class="oe_heading">Media</li>
            *
            * 
            <li><a href="#">Green Earth Day</a></li>
        </ul>
        </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="#">Illusion</a></li>
         </ul>
         </div>
      </li>
      <li><a href="">Events</a>
         <div style="left:-335px;">
         <ul>
            <li class="oe_heading">Shows 2010</li>
            *
            *
            <li><a href="#">London</a></li>
         </ul>
         <ul>
            <li class="oe_heading">Shows 2011</li>
            *
            *
            <li><a href="#">London</a></li>
         </ul>
         <ul>
            <li class="oe_heading">Special Events</li>
            *
            *
            <li><a href="#">Model Workshops</a></li>
         </ul>
         </div>
      </li>				
   </ul>
</div>

Каждое подменю обвернуто в DIV, который имеет свой собственный стиль (положение от левого края). Это сделано для того, чтобы наше подменю абсолютно позиционировалось в пределах основного контейнера и начиналось от начала основного меню. Таким образом, мы будем иметь отрицательное значение левого края для каждого DIV (декремент 112px).

Давайте посмотрим на стиль.

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

Элементы списка будут иметь следующий стиль:

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 пикселей, так что у нас могут поместиться 3 списка рядом друг с другом:

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 слой наложения мы поставили перед меню, поэтому наше меню будет всегда находится на переднем плане.

Далее закэшируем основные элементы:

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

При наведении указателя мыши на любой из пунктов меню, мы добавим ему класс “slided” and “selected” . Мы также зададим очень высокий Z-индекс для текущего подменю. Когда указатель мыши покидает пределы пункта мы удаляем класс “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,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();

});

Ну вот и все! Надеюсь что этот урок Вам понравился и Вы сочли его полезным!

Скачать исходники можно здесь!

Источинк: http://tympanus.net

Оцените эту статью: