Я хотел создать выпадающее меню. HTML было сложно писать и поддерживать, поэтому я решил использовать React. Преимущества были:
- Легко сохранить открытую вкладку.
- Легко установить имя класса в зависимости от состояния.
- Поддерживаемый код.
С чего начать?
Что мне нужно для создания выпадающего меню?
- Данные.
- Дизайн https://dribbble.com/shots/17394838-Workspace-Switch.
- Способ узнать, какие вкладки показывать.
Данные
Я не знал, какие данные мне нужны. Я думал около минуты, и у меня появилась идея. Есть много интернет-магазинов, продающих товары.
Я скопировал следующие категории:
- Ноутбуки
- Компьютеры и компьютерные комплектующие
- Компьютерное оборудование
- Игры
Каждая категория имела подкатегории. Я скопировал несколько из них.
Уценка
Я начал структурировать данные в HTML, которые выглядели так:
Причины структуры разметки:
- Кнопки позволяют браузерам обеспечивать встроенную поддержку клавиатуры.
- Пользователь может перемещаться с помощью клавиатуры, мыши и любого встроенного инструмента.
- Средства чтения с экрана сообщают пользователю, что элемент кнопки доступен для нажатия.
- Улучшенный SEO, потому что структура семантически правильная.
- Рекомендуется использовать собственные элементы HTML.
Я могу изменить структуру уценки, поэтому я оставил дизайн на конец.
Поведение раскрывающегося списка
Я хочу знать точный желаемый результат. Опыт показывает, что написание кода без цели не приносит пользы. Год назад я пытался создать анимацию, и пользователь мог перейти к следующему шагу щелчком мыши. В итоге получился не тот результат, который я хотел.
Я усвоил уроки:
- Прежде чем писать код, у вас должно быть четкое представление о том, что вы создаете.
- Каковы условия для правильной работы моего продукта?
Как я хочу, чтобы мой раскрывающийся список вел себя? Каковы точные требования?
Поведение и требования:
- Одновременно может быть открыто только одно раскрывающееся меню.
- Щелкнув одну раскрывающуюся вкладку, вы закроете все остальные.
- Активен тот, чье содержимое кнопки находится в состоянии.
- Щелчок за пределами меню устанавливает пустое состояние.
- Нажатие на кнопку открытой выпадающей вкладки закрывает вкладку.
Каковы условия для работы моего раскрывающегося списка?
- Состояние имеет либо пустую строку, либо содержимое активной вкладки.
- Вкладка видна, если содержимое кнопки находится в состоянии.
Написание кода
Я начал с одного правила. Напишите абсолютный минимум кода, чтобы требования работали.
Мне плевать на побочные случаи — никто не будет широко использовать раскрывающийся список. Извлекайте логику после ощущения, что я не могу ориентироваться в коде. Отсутствие этого ощущения означает, что с кодом все в порядке.
Грубые шаги:
- Используйте JSES5.
- Напишите обработчик события клика.
- Сохраните активное раскрывающееся меню.
- Установите класс CSS правильно.
- Скройте раскрывающийся список с помощью свойства display none.
- Оно работает!
Начните стилизовать раскрывающийся список.
Стили раскрывающегося списка
Я взял цвета и некоторые детали, а также общее ощущение. После стилизации одного элемента я не смог стилизовать остальные из-за слишком большого количества кода. Я создал компонент для каждого элемента раскрывающегося списка и поместил туда стили. Я использовал компонент раскрывающегося списка, чтобы показать каждую категорию, и это сработало. Я чувствовал беспокойство, потому что не знал, как структурировать другие элементы. Копипаст выдал ошибку, и я следовал установленному правилу. Извлечение логики, когда это становится трудным, было успешным.
Результат
Доволен подходом и результатом.
Codepen: https://codepen.io/Flexos96/pen/QWQaPzB?editors=0010