Решение: Интерактивно меню

Едно меню, един обект, ясен контрол върху селекцията

Най-важното тук е как чрез един обект управляваме цялото меню и гарантираме, че във всеки момент има само един избран елемент. Използваме контекста this, за да пазим състоянието (кой линк е селектиран) и bind, за да сме сигурни, че той няма да се промени при закачане на събития. Така изграждаме чиста и контролирана логика за работа с DOM и събития.

Стъпка по стъпка: как да изградите интерактивното меню

1. Създайте обект menu чрез анонимна конструктор функция, извикана директно с new, за да имате само една инстанция.
2. Дефинирайте метод Initialize и го закачете към window.onload.
3. В Initialize вземете всички линкове от менюто и ги запазете в свойство (например this.links).
4. Обходете колекцията с Object.keys(...).forEach(...).
5. На всеки линк добавете click събитие, което извиква вътрешната функция OnClick.
6. В OnClick:
   • Ако има вече избран елемент, премахнете класа Selected.
   • Използвайте event.target, за да разберете кой е кликнатият елемент.
   • Запазете го в this.selected и му добавете класа Selected.

Използвани ключови методи и концепции

• addEventListener – закачане на click събитие към всеки линк
• bind(this) – фиксира контекста this към обекта menu
• Object.keys() – връща масив с ключовете на колекция
• event.target – указва кой DOM елемент е активирал събитието
• classList.add() / classList.remove() – добавяне и премахване на CSS клас

Този модел е основа за изграждане на стабилни и предвидими интерактивни компоненти.