◆ Keyv aimmenu.js

JavaScript Library · No deps · ~3kb

aimmenu.js

Умное наведение для многоуровневых меню. Скрипт анализирует траекторию движения курсора и откладывает закрытие подменю, если пользователь движется к нему по диагонали — без случайных срабатываний и без jQuery.

Размер
~3 КБ
Зависимости
нет
Лицензия
MIT

# Живая демонстрация

наведите курсор
  • Галактический Экспресс

    🚀 Путешествие по Вселенной

    Выберите пункт назначения: Марс, Альфа Центавра или чёрная дыра. Мышь — ваш космический джойстик.
  • Магический Шар

    🔮 Задай вопрос Вселенной

    Наведите курсор, чтобы увидеть предсказание. Траектория мыши влияет на ответ!
  • Музыка Волн

    🎵 Создай мелодию

    Двигайте мышью, чтобы генерировать звуковые волны. Чем быстрее движение — тем выше тональность.
  • Лабиринт Минотавра

    🏰 Найди выход

    Проведите курсор по лабиринту, чтобы добраться до сокровища. Ошибка — и вы встретите минотавра.
  • Невидимые Чернила

    ✍️ Прояви текст

    Наведите курсор, чтобы раскрыть секретное послание. Движение мыши — как ультрафиолетовая лампа.

Ведите курсор по диагонали к подменю — оно останется открытым.
Нажмите Esc, чтобы закрыть активное подменю.

# Скачать

Сам скрипт

Чистая библиотека aimmenu.js без демо-кода. Подключите и вызовите aimmenu(menu, opts).

↓ aimmenu.js

Простая HTML-версия

Минимальные стили — голый рабочий пример. Удобно как стартовая точка для своей вёрстки.

↓ aimmenu-simple.html

Улучшенная версия

Стильный самодостаточный пример с анимацией и оформлением в духе этого сайта.

↓ aimmenu-enhanced.html

HTML-примеры подключают aimmenu.js из той же папки — кладите файлы рядом.

# Использование

Подключите скрипт и инициализируйте на контейнере меню. Колбэки activate и deactivate отвечают за показ и скрытие подменю:

<script src="aimmenu.js"></script>
<script>
  const menu = document.querySelector('.aimmenu');
  aimmenu(menu, {
    submenuDirection: 'right',   // right | left | below | above
    tolerance: 75,               // запас по краям меню, px
    delay: 300,                  // задержка закрытия, мс
    exitMenu: () => true,
    activate(row)   { row.querySelector('.is-sub').style.display = 'block'; },
    deactivate(row) { row.querySelector('.is-sub').style.display = 'none';  },
  });
</script>