Привет, ребята🙌

Сегодня я закончил 26 видео JavaScript30!

Проект 26: выпадающее меню «Полосатый след»

Источник: https://javascript30.com

Обучение:

Нам было поручено настроить выпадающий элемент, который следовал за панелью навигации. Элемент был настроен для каждого пункта меню.

Мы создали три элемента списка внутри ненумерованного списка, составляющего панель навигации. Они включали раскрывающийся класс CSS, содержащий свойства для непрозрачности и отображения. Новым свойством CSS для меня является свойство will-change, которое подсказывает браузеру, что позже следует ожидать изменения элемента.

.dropdown {
    opacity: 0;
    will-change: opacity;
    display: none;
  }

Затем мы добавили два подкласса, которые обеспечат изменение.

.trigger-enter .dropdown {
    display: block;
  }
.trigger-enter-active .dropdown {
    opacity: 1;
  }

В тег script мы включили обычный набор переменных и добавили прослушиватели событий. Затем мы создали функцию для обработки события мыши и активации двух подклассов.

function handleEnter() {
    this.classList.add('trigger-enter');
    setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
    background.classList.add('open');

Чтобы настроить выпадающее окно под каждый элемент, нам нужно было получить координаты из области просмотра. Итак, мы использовали метод getBoundingClientReact для получения измерений контейнера. В этом случае мы использовали элементы dropdown и nav.

const dropdown = this.querySelector('.dropdown');
const dropdownCoords = dropdown.getBoundingClientRect();
const navCoords = nav.getBoundingClientRect();

Установите правильные координаты в переменную.

const coords = {
      height: dropdownCoords.height,
      width: dropdownCoords.width,
      top: dropdownCoords.top - navCoords.top,
      left: dropdownCoords.left - navCoords.left
    };

Теперь мы можем изменить размер контейнера с помощью метода setProperty и литералов шаблона.

background.style.setProperty('width', `${coords.width}px`);
    background.style.setProperty('height', `${coords.height}px`);
    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);

Наконец, мы использовали еще одну функцию для обработки выхода мыши из контейнера.

function handleLeave() {
    this.classList.remove('trigger-enter', 'trigger-enter-active');
    background.classList.remove('open');
  }

Программа давала приятный эффект при перемещении мыши от элемента к элементу на панели навигации.

Сегодня я узнал (Т-И-Л):

  • Различные вещи CSS,
  • Событие обработки мыши и активация связанных с ним классов!

Это все на Day26 ✅

Спасибо за внимание.Увидимся завтра!