У першій частині були розглянуті базові принципи роботи селекторів і наведено кілька прикладів, в даній статті я постараюся акцентувати увагу на реалізації JavaScript меню для Вашого сайту.

Якщо Вам готовий код наочніше документації, то переходимо від слів до справи, тобто на сторінку з прикладами.

Матеріали даної статті включені в підручник «jQuery для початківців». Підручник розповсюджується безкоштовно, і супроводжується інтерактивними прикладами.

Slide меню

Два slide-меню на сторінці: вгорі і внизу.

Клацаємо по посиланню з класом “btn-slide”, виїжджає панель з меню.

Частково цей приклад є в першій частині, так що особливо заглиблюватися в реалізацію не буду, наведу лише JavaScript код з поясненнями:

// коли завантажиться сторінка
$(document).ready(function(){
// вішаємо обробник на посилання з класом “btn-slide” (верхнє меню)
$(“.btn-slide”).click(function(){
// висуваємо/ховаємо панель з id = panel1
$(“#panel1”).slideToggle(“slow”);
// змінюємо клас самої посилання
$(this).toggleClass(“active”);
// і нічого не робимо далі (щоб не було переходу на посилання)
return false;
});
// вішаємо обробник на посилання з класом “btn-slide2” (нижнє меню)
$(“.btn-slide2”).click(function(){
// висуваємо/ховаємо панель з id = panel2
$(“#panel2”).slideToggle(“slow”);
// змінюємо клас самої посилання
$(this).toggleClass(“active2”);
// і нічого не робимо далі (щоб не було переходу на посилання)
return false;
});
});

Slide меню 2

Slide-меню ліворуч і праворуч сторінки. Для початку приготуємо HTML :

  • Елемент 1
  • Елемент 2
  • Елемент 3
  • Елемент 1
  • Елемент 2
  • Елемент 3
  • Елемент 1
  • Елемент 2
  • Елемент 3

Меню

У нас повинно вийти щось на зразок наступного:

Тепер створимо обробник подій для посилань з класом “btn-slide”:

// створюємо обробник подій для посилань з класом “btn-slide”
$(“.btn-slide”).toggle(function(){
// … 1-ий клік по посиланню
// повертаємо false
return false;
},function(){
// … 2-ой клік по посиланню
// повертаємо false
return false;
});

Потім нам необхідно знайти елемент з класом “panel” і висунути його на 120 пікселів:

// йдемо DOM’на 2-а рівня вгору, всередині елемента (це div c класом left/right) знаходимо потрібний нам елемент і приращиваем йому 120 пікселів
$(this).parent().parent().find(“.panel”).animate({“width”: “+=120px”}, “slow”);
// замінюємо клас кнопки (зміна стрілочки)
$(this).toggleClass(“active”);

З’єднуємо це разом:

$(document).ready(function(){
$(“.btn-slide”).toggle(function(){
$(this).parent().parent().find(“.panel”).animate({“width”: “+=120px”}, “slow”);
$(this).toggleClass(“active”); return false;
},function(){
$(this).parent().parent().find(“.panel”).animate({“width”: “-=120px”,opacity: “hide”}, “slow”);
$(this).toggleClass(“active”); return false;
});
});

Drop-down меню

Одна з найпоширеніших реалізацій меню для сайту це горизонтальне випадаюче меню, його звичайно можна реалізувати за допомогою CSS, але стаття у нас про jQuery, так що будемо орудувати ним. Почнемо з HTML’a (зауважу, що для всіх інших прикладів код практично не відрізняється):

Ну і власне сам HTML:

  • Меню 1
    • Елемент 1.1
    • Елемент 1.2
    • Елемент 1.3
  • Меню 2
    • Елемент 2.1
    • Елемент 2.2
    • Елемент 2.3
  • Меню 3
    • Елемент 3.1
    • Елемент 3.2
    • Елемент 3.3

Далі нам необхідно додати оброблювач події hover для елементів li:

$(‘.topmenu ul li’).hover(
function() {
// …
},
function() {
// …
}
);

І відображаємо під-меню:

// знаходимо елемент ul і викликаємо анімацію slideDown
$(this).find(‘ul’).slideDown();
// змінюємо фон вибраного елемента шляхом додавання класу active
$(this).addClass(“active”);

А тепер всі разом:

$(document).ready(function(){
$(‘.topmenu ul li’).hover(
function() {
$(this).addClass(“active”);
$(this).find(‘ul’).stop(true, true); // зупиняємо всю поточну анімацію
$(this).find(‘ul’).slideDown();
},
function() {
$(this).removeClass(“active”);
$(this).find(‘ul’).slideUp(‘fast’);
}
);
});

Drop-down AJAX меню

Горизонтальне випадаюче меню з подгрузкой елементів AJAX’ом.
Для початку нам знадобиться саме меню:

Та заготовки для підменю, назвемо їх menu1.html, menu2.html і menu3.html – по id відповідних елементів меню (скоріше за все дані елементи будуть генеруватися динамічно, але для спрощення прикладу використаємо статичні сторінки):

Приклад menu1.html:

  • Елемент 1
  • Елемент 2
  • Елемент 3

Тепер, як і в попередньому прикладі, нам необхідний обробник події hover:

$(document).ready(function(){
$(‘.topmenu ul li’).hover(
function() {
// … тут необхідно внести зміни в код
$(this).addClass(“active”);
},
function() {
// тут залишаємо так як є
$(this).removeClass(“active”);
$(this).find(‘ul’).slideUp(‘fast’);
}
);
});

Тепер необхідно завантажити відсутні елементи меню допомогою AJAX’a:

// отримуємо id активного елемента меню
var id = $(this).attr(‘id’);
// запихаємо активний елемент в локальну змінну
var li = $(this);
$.ajax({
// формуємо ім’я запитуваної допомогою AJAX сторінки
url: ‘ajax/’+id+’.html’,
beforeSend: function(){
// перед тим як “запитати” змінюємо клас елемента – відображаємо loading картинку
li.addClass(‘loading’);
},
success: function(data){
// наповнюємо підменю
li.append(data);
// показуємо що вийшло
li.find(‘ul’).slideDown();
// прибираємо loading картинку
li.removeClass(‘loading’);
}
});

Збираємо:

$(document).ready(function(){
$(‘.topmenu ul li’).hover(
function() {
// додаємо перевірочку – не завантажували до цього елементи
if ($(this).find(‘ul’).length == 0) {
var id = $(this).attr(‘id’);
var li = $(this);
$.ajax({
url: ‘ajax/’+id+’.html’,
beforeSend: function(){
li.addClass(‘loading’);
},
success: function(data){
li.append(data);
li.find(‘ul’).stop(true, true); // зупиняємо всю поточну анімацію
li.find(‘ul’).slideDown();
li.removeClass(‘loading’);
}
});
} else {
$(this).find(‘ul’).stop(true, true); // зупиняємо всю поточну анімацію
$(this).find(‘ul’).slideDown();
}
$(this).addClass(“active”);
},
function() {
$(this).find(‘ul’).slideUp(‘fast’);
$(this).removeClass(“active”);
}
);
});

Drop-down меню

Вертикальне меню, що випадає. Досить простенький приклад:

$(document).ready(function(){
// додати оброблювач події hover
$(‘.topmenu ul li’).hover(
function() {
$(this).find(‘ul:first’).stop(true, true);
$(this).find(‘ul:first’).slideDown();
},
function() {
$(this).find(‘ul:first’).slideUp(‘fast’);
}
);
// всіх елементів меню з вкладеністю додати символ »
$(‘.topmenu li:has(ul)’).find(‘a:first’).append(‘»’);
});

Float меню

Плаваюче меню. Нам знадобиться плагін Dimensions (щоб працювали методи height і width()) – для jQuery 1.3.x даний плагін вже не потрібен. Ну з HTML я думаю, Ви розберетеся:

Тепер по порядку – почнемо з отримання інформації про поточному розташуванні “плаваючих” меню:

// отримуємо інформацію з css про розташування верхнього меню
menu1 = parseInt($(“.right”).css(“top”).substring(0,$(“.right”).css(“top”).indexOf(“px”)));
// розташування нижнього меню обчислюємо відштовхуючись від розмірів вікна (96 взято на око)
menu2 = $(window).height() – 96;

Далі, нам необхідно “повісити” свою функцію для події scroll:

$(window).scroll(function () {
// тут будемо перетягувати наші меню
});

Ну і власне наповнення:

$(window).scroll(function () {
// визначаємо нове положення для наших меню
offset1 = menu1 + $(document).scrollTop() + “px”;
offset2 = menu2 – $(‘.left .panel’).height() + $(document).scrollTop() + “px”;
// перетягуємо елементи на нове місце
$(‘.right’).animate({top:offset1},{duration:500,queue:false});
$(‘.left’).animate({top:offset2},{duration:1000,queue:false});
});

Так само додамо відображення/приховання елементів підменю:

// для всіх елементів “a” які знаходяться в “li” з вкладеними списками “ul”
$(‘.panel ul li:has(ul) a’).click(function() {
// йдемо до паренту знаходимо “ul” і ховаємо/приховуємо його
$(this).parent().find(‘ul’).slideToggle();
return false;
});
// кнопка “+” – приховуємо всі “ul” вкладені в “li”
$(‘a.plus’).click(function(){
// йдемо до паренту, знаходимо наступний елемент в будинку, шукаємо в ньому “ul ul li”, виконуємо “slideUp”
$(this).parent().next().find(‘ul ul li’).slideUp(‘fast’);
return false;
});
// кнопка “-” – відображаємо всі “ul” вкладені в “li”
$(‘a.minus’).click(function(){
// йдемо до паренту, знаходимо наступний елемент в будинку, шукаємо в ньому “ul ul li”, виконуємо “slideDown”
$(this).parent().next().find(‘ul ul li’).slideDown(‘slow’);
return false;
});

Так само Ви можете скачати всі приклади в одному архіві.

Цикл статей

  • jQuery для початківців
  • jQuery для початківців. Частина 2. JavaScript Меню
  • jQuery для початківців. Частина 3. AJAX
  • jQuery для початківців. Частина 4. Селектори
  • jQuery для початківців. Частина 5. Ефекти
  • jQuery для початківців. Частина 6. Події
  • jQuery для початківців. Частина 7. Пишемо плагіни
  • jQuery для початківців. Частина 8. Розширюємо фільтри
  • jQuery для початківців. Частина 9. Пишемо плагіни анімації