Спливаюче меню на jquery, веб-розробка

Отже, перш за все инициализируем бібліотеку jquery.js. Бажано підключати її в секції документа:

Тут ми робимо наступні речі:

  1. коли дерево DOM документа готове, пробігає в циклі по всім підміню (ul # my-menu ul);
  2. в кожній ітерації призначаємо клас 'collapsible' посиланню, яке відповідає за дане підміню;
  3. цієї ж посиланням призначаємо обробник події 'click', який в залежності від стану підміню буде розкривати або приховувати його.
  4. onlick повертає 'false', щоб не відбувався перехід по посиланню.

Спробуємо потикати на результат:

Мені здається, коли ти ховаєш, наприклад, підміню "Продукція", і потім розкриваєш його - дочірні підміню повинні бути закритими незалежно від того в якому становищі вони були раніше. Тому додамо в callback-функцію методу slideUp ще такий рядок:

В принципі, меню готове. Однак можна навісити ще пару невеликих примочок. Наприклад, реалізувати запам'ятовування розкритості меню при переході на інші сторінки. Зробимо це через cookie. Сенс такий - коли меню розкривається, в cookie заноситься запис виду 'submenuMark-xx = opened', де xx - порядковий номер (індекс) даного підміню в списку всіх підміню. Відповідно, коли закривається - запис стирається з cookie.

Для роботи з cookie нам буде зручний плагін jquery.cookie.js. Завантажити його і підключимо поруч з jquery. Тепер напишемо пару допоміжних функцій для роботи з cookie:

При завантаженні документа нам потрібно подивитися які підміню відзначені в куках і відкрити їх. Тому вставимо наступний шматок коду в цикл по всіх подменюшкам:

Як ви могли помітити, у нас тепер є CSS-класи 'expanded', 'collapsed' і 'collapsible' - таким чином можна трохи прикрасити наше меню за допомогою CSS.

І останній штрих - всюди, де в нашому коді відкривається або закривається підміню, поставити виклик відповідної куки-функції. Цього я описувати вже не буду - можна подивитися в готовому скрипті. Отже, подивимося на готове меню:

Збереження положення меню в cookie можна перевірити якщо потикати на посилання і перезавантажити сторінку - підміню збережуть свої статки.

Подивитися вихідні можна в прикріпленому архіві. Успіхів!