aimmenu.js/example.html at main · ivankrivenko/aimmenu.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <title>aimmenu.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

  </head>

  <body>


    <div class="container">

        <h1>aimmenu.js — Умное наведение для многоуровневых меню с задержкой</h1>
        <p>
            Лёгкий JavaScript-скрипт для создания адаптивного выпадающего меню без jQuery, учитывающего траекторию движения мыши.<br/>
            Скрипт предотвращает случайную активацию подменю, используя алгоритм анализа направления движения курсора и реализует задержку открытия,<br/>
            если пользователь движется к подменю. Поддерживает настройку направлений, задержек, обработчиков событий и гибко адаптируется под различные структуры меню.
        </p>


        <ul class="aimmenu">
            <li class="has-sub">
                <a href="#">Галактический Экспресс</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">🚀 Путешествие по Вселенной</h3>
                    <div class="is-sub-content">Выберите пункт назначения: Марс, Альфа Центавра или черная дыра. Мышь — ваш космический джойстик.</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Магический Шар</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">🔮 Задай вопрос Вселенной</h3>
                    <div class="is-sub-content">Наведите курсор, чтобы увидеть предсказание. Траектория мыши влияет на ответ!</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Музыка Волн</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">🎵 Создай мелодию</h3>
                    <div class="is-sub-content">Двигайте мышью, чтобы генерировать звуковые волны. Чем быстрее движение — тем выше тональность.</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Лабиринт Минотавра</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">🏰 Найди выход</h3>
                    <div class="is-sub-content">Проведите курсор по лабиринту, чтобы добраться до сокровища. Ошибка — и вы встретите минотавра.</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Невидимые Чернила</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">✍️ Прояви текст</h3>
                    <div class="is-sub-content">Наведите курсор, чтобы раскрыть секретное послание. Движение мыши — как ультрафиолетовая лампа.</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Кинотеатр Теней</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">🎭 Театр миниатюр</h3>
                    <div class="is-sub-content">Управляйте силуэтами на экране с помощью мыши. Создайте свою собственную историю.</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Гравитационный Вихрь</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">🌀 Испытай гравитацию</h3>
                    <div class="is-sub-content">Приблизьте курсор к центру, и элементы начнут "затягиваться". Чем ближе — тем сильнее притяжение.</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Алхимическая Лаборатория</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">⚗️ Смешай элементы</h3>
                    <div class="is-sub-content">Проведите мышью между ингредиентами, чтобы создать зелье. Огонь + Вода = Пар!</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Футуристический Навигатор</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">🧭 Выбери маршрут</h3>
                    <div class="is-sub-content">Куда полетим? Ваш курсор определяет траекторию полета через цифровой город будущего.</div>
                </div>
            </li>

            <li class="has-sub">
                <a href="#">Зеркальный Портал</a>
                <div class="is-sub">
                    <h3 class="is-sub-title">🪞 Войди в отражение</h3>
                    <div class="is-sub-content">Наведите курсор, и меню начнет "отражаться" в другом измерении. Попробуйте поймать свое отражение!</div>
                </div>
            </li>
        </ul>

    </div>

    <style>
        .aimmenu {
            width: 250px;
            position: relative;
        }

        .aimmenu>li {
            border: 1px solid #ccc;
            padding: 10px;
        }

        .aimmenu .is-sub {
            width: 600px;
            background: #456;
            position: absolute;
            display: none;
            color: #000;
        }

        .aimmenu :nth-child(odd) .is-sub {
            background: #cff;
        }

    </style>


    <script src="aimmenu.js" type="text/javascript"></script>


  </body>
</html>