Меню для сайту на jQuery, з ефектом накладення

14

Від автора: У цьому підручнику ми створимо просте меню для сайту на jQueru, яке буде виділятися кожен раз, коли ми проведемо над ним мишею, затемнюючи все навколо, за винятком меню. Меню залишиться білим, а область підменю розшириться. Ми створимо цей ефект за допомогою jQuery.

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

Також завантажте вихідні коди собі на комп’ютер!

Отже, давайте почнемо!

Розмітка

Структура HTML буде складатися з основного пакувальника меню div, що містить накладення, і неупорядкованого списку меню. Саме меню отримає посилання і елемент div, як підменю в своїх елементах списку. Кожен з елементів підменю буде містити списки для колонок підменю, де кожен отримає назву елемента списку:

  • Collections

    • Summer 2011
    • Milano
  • Projects

  • Fragrances

    • Fashion Fragrances
    • Deálure
    • Violet Woman
    • Deep Blue for Men
    • New York, New York
    • Illusion
  • Events
  • Stores

У кожного з div ів підменю будуть призначені inline-стилі позицій ліворуч. Подивившись на стиль, ми побачимо, що потрібно встановити це значення, якщо хочемо, щоб підменю було абсолютно позиціоновано, але всередині щодо позиційованого контейнера. Так що для позиціонування всіх div ів підменю спочатку все меню нам потрібно «відтягнути» кожен div побільше вліво, отже, так ми отримаємо від’ємне ліве значення для кожного div а (зменшення на 112px).

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

CSS

Переконайтеся спочатку, що ви скинули всі стилі (нам для списку не потрібно ніяких відступів або полів, визначених браузером). Ми почнемо з накладання на тілі (body), яке є простим div ом з вихідної непрозорістю, встановленої на 0:

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

Position буде встановлений на fixed, так як нам потрібно, щоб він завжди залишався в лівому верхньому кутку, заповнюючи весь екран.

Список основного меню отримає наступний спосіб:

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

А якщо не поодинокий, то потрібно, щоб ширина у нього була 150px, і можна було розмістити 3 ковзних елемента поруч:

ul.oe_menu ul li{
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 продовжимо працювати з ефектами.

Код меню сайту на jQuery

Основна ідея полягає в тому, щоб з’являлося накладення і затемняло на сторінці всі, крім меню. Ми гарантуємо, що накладення знаходиться під меню, тому що в структурі HTML ми помістили його перед меню. І накладення залишається поверх усього іншого, тому що повністю йде перед структурою HTML. Таким чином, z-індекси розташовуються в потрібному порядку. Продумайте це, якщо інтегруєте куди-небудь це меню.

Спочатку давайте кешуємо деякі елементи:

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

При встановленні функції hover будь-якого пункту меню ми додаємо до йому класи «slided» і «selected». Відповідний div підменю буде вислизати, а всі інші будуть ховатися. Ми також передаємо дуже високий 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.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();
}

От і все! Сподіваємося, що цей підручник не здався нудним, і ви знайшли його корисним!

Меню для сайту на jQuery, з ефектом накладення

На цьому урок зі створення меню для сайту з ефектом накладення, засобами HTML+CSS+jQuery завершений.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.