Я хотел создать выпадающее меню. HTML было сложно писать и поддерживать, поэтому я решил использовать React. Преимущества были:

  • Легко сохранить открытую вкладку.
  • Легко установить имя класса в зависимости от состояния.
  • Поддерживаемый код.

С чего начать?

Что мне нужно для создания выпадающего меню?

Данные

Я не знал, какие данные мне нужны. Я думал около минуты, и у меня появилась идея. Есть много интернет-магазинов, продающих товары.

Я скопировал следующие категории:

  • Ноутбуки
  • Компьютеры и компьютерные комплектующие
  • Компьютерное оборудование
  • Игры

Каждая категория имела подкатегории. Я скопировал несколько из них.

Уценка

Я начал структурировать данные в HTML, которые выглядели так:

Причины структуры разметки:

  • Кнопки позволяют браузерам обеспечивать встроенную поддержку клавиатуры.
  • Пользователь может перемещаться с помощью клавиатуры, мыши и любого встроенного инструмента.
  • Средства чтения с экрана сообщают пользователю, что элемент кнопки доступен для нажатия.
  • Улучшенный SEO, потому что структура семантически правильная.
  • Рекомендуется использовать собственные элементы HTML.

Я могу изменить структуру уценки, поэтому я оставил дизайн на конец.

Поведение раскрывающегося списка

Я хочу знать точный желаемый результат. Опыт показывает, что написание кода без цели не приносит пользы. Год назад я пытался создать анимацию, и пользователь мог перейти к следующему шагу щелчком мыши. В итоге получился не тот результат, который я хотел.

Я усвоил уроки:

  • Прежде чем писать код, у вас должно быть четкое представление о том, что вы создаете.
  • Каковы условия для правильной работы моего продукта?

Как я хочу, чтобы мой раскрывающийся список вел себя? Каковы точные требования?

Поведение и требования:

  • Одновременно может быть открыто только одно раскрывающееся меню.
  • Щелкнув одну раскрывающуюся вкладку, вы закроете все остальные.
  • Активен тот, чье содержимое кнопки находится в состоянии.
  • Щелчок за пределами меню устанавливает пустое состояние.
  • Нажатие на кнопку открытой выпадающей вкладки закрывает вкладку.

Каковы условия для работы моего раскрывающегося списка?

  • Состояние имеет либо пустую строку, либо содержимое активной вкладки.
  • Вкладка видна, если содержимое кнопки находится в состоянии.

Написание кода

Я начал с одного правила. Напишите абсолютный минимум кода, чтобы требования работали.

Мне плевать на побочные случаи — никто не будет широко использовать раскрывающийся список. Извлекайте логику после ощущения, что я не могу ориентироваться в коде. Отсутствие этого ощущения означает, что с кодом все в порядке.

Грубые шаги:

  1. Используйте JSES5.
  2. Напишите обработчик события клика.
  3. Сохраните активное раскрывающееся меню.
  4. Установите класс CSS правильно.
  5. Скройте раскрывающийся список с помощью свойства display none.
  6. Оно работает!

Начните стилизовать раскрывающийся список.

Стили раскрывающегося списка

Я взял цвета и некоторые детали, а также общее ощущение. После стилизации одного элемента я не смог стилизовать остальные из-за слишком большого количества кода. Я создал компонент для каждого элемента раскрывающегося списка и поместил туда стили. Я использовал компонент раскрывающегося списка, чтобы показать каждую категорию, и это сработало. Я чувствовал беспокойство, потому что не знал, как структурировать другие элементы. Копипаст выдал ошибку, и я следовал установленному правилу. Извлечение логики, когда это становится трудным, было успешным.

Результат

Доволен подходом и результатом.

Codepen: https://codepen.io/Flexos96/pen/QWQaPzB?editors=0010

Если этот пост был полезен, пожалуйста, несколько раз нажмите кнопку аплодисментов 👏, чтобы выразить свою поддержку автору 👇

🚀Разработчики: учитесь и развивайтесь, не отставая от того, что важно, ПРИСОЕДИНЯЙТЕСЬ К FAUN.