Бібліотека jQuery UI. Віджет Menu

35

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми дізнаємося про віджеті Menu, який можна використовувати для створення меню на вашому сайті.

Меню — це невід’ємний атрибут будь-якого сайту. Зараз вже складно когось здивувати яким би то не було меню, а раніше, пам’ятається, створенням звичайного випадаючого меню для сайту можна було похвалитися на форумі. Були і такі часи :)

Сьогодні ж для створення звичайного випадаючого меню вам буде потрібно буквально десяток рядків коду CSS — меню готово. Однак, якщо вам лінь писати такий код і ви використовуєте при цьому бібліотеку jQuery UI, тоді чому б не звернутися до директорії Menu?

Почнемо з розмітки нашого меню. Якщо ми використовуємо базовий варіант плагіна, тоді розмітка повинна бути наступного виду:

В результаті ми отримаємо наступну картину:

Библиотека jQuery UI. Виджет Menu

Залишилося викликати однойменний метод плагіна — menu():

$(function(){
$(‘#menu’).menu();
});

Библиотека jQuery UI. Виджет Menu

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

.ui-menu { width: 150px; }

Після цього меню в згорнутому стані буде займати вказану ширину у пікселях. До речі, подивимося, як воно виглядає в розгорнутому стані.

Библиотека jQuery UI. Виджет Menu

Непогано. До речі, а давайте спробуємо прибрати теги div всередині елементів списку li, в сучасних меню вони просто зайві:

Библиотека jQuery UI. Виджет Menu

Меню трохи попливло, але проблема легко вирішується, просто зробимо тег посилання блоковим елементом і приберемо підкреслення:

.ui-menu a{
display: block;
text-decoration: none;
}

Ось тепер все відмінно, верстка мене влаштовує і меню працює відмінно. На цьому сьогодні все. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!