Эволюция всегда идет по нарастающей. Вот и мы с каждой новой статьей продвигаемся в своих познаниях. С каждой новой строчкой меню становится все сложнее, но в то же время и красивее. В этот раз мы расширим границы возможностей и добавим JavaScript к нашему меню. Для чего нам вообще нужен JS. Обычно его добавляют для какой-нибудь анимации меню. Да, мы уже делали анимацию в теме Создание меню :: Горизонтальное :: Двухуровневое #example_4. Но вы могли заметить, что анимация работает только на появление меню. Кроме того далеко не все эффекты можно сделать лишь с CSS. Хоть нативные сайты с CSS-анимацией быстрее, чем с  JS, но мы никогда не получим той гибкости и удобства без JS.

И так, поехали

В статье Все статьи

fadeIn / fadeOut
(example_1::github)

Для начала сделаем простую анимацию появления и исчезновения двухуровнего меню.

HTML

Ничего нового в разметке нету. CSS стал даже проще, чем был (сравните с Создание меню :: Горизонтальное :: Двухуровневое #example_2)

CSS

Как видите я закомментировал строку, где меню должно появится. Теперь за этим свойством будет следить JS

JS (в своих примерах я использую jQuery, для любителей нативного JS рекомендую посмотреть на VanillaJS)

Кратко поясню: на каждый элемент li вешаются 2 обработчика mouseover(1-ая функция) и mouseout (2-ая функция). В каждой из них мы находим дочернее меню (‘> ul’) и выполняем функцию появления (fadeIn) или исчезновения (fadeOut). Числа, переданные в качетве параметра, – это время анимации в миллисекундах.

setTimer
(example_2::github)

Усложним пример. Сделаем анимацию с задержкой на многоуровневом меню. Если Вы разберетесь в этой теме, то Вы разберетесь во всем.

HTML

CSS (пример взят из Создание меню :: Горизонтальное :: Многоуровневое меню #example_1)

Опять за появление отвечает JS

JS в этот раз поинтереснее

Мы опять используем 2 функции. Самое интересное происходит внутри функций. Чтобы лучше разобраться начнем с конца

MouseOut: 

  1. В переменной $this запоминаем элемент li, с которым происходит событие (мышка покинула область li)
  2. В разметки для элемента li добавляем псевдо аттрибут data-timer с параметром ID таймера (почему псевдо – потому что data привязывает не к объекту DOM, а к объекты jQuery. Он будет сохранен внутри jQuery)
  3. Создаем таймер с задержкой 200 мс
  4. Когда пройдет 200мс начнет выполняться функция внутри таймера.
    1. При помощи замыкания передаем элемент li
    2. Находим дочернее меню
    3. Останавливаем все анимации для этого элемента, чтобы они не накладывались
    4. Сворачиваем меню

MouseOver:
Тут еще проще

  1. Ищем аттрибут data-timer у элемента li (если он есть, то мы получим ID таймера закрытия меню)
  2. Останавливаем таймер
  3. Опять ищем дочернее меню, останавливаем анимации и запускаем анимацию открытия

Зачем такие сложности? Благодаря задержки в 200мс, у пользователя не закроется меню если он, случайно вышел за пределы меню на время меньшее 200мс.