Я много использую React и много использую панели навигации, поэтому для меня это было очевидным. В этом нет ничего экстравагантного. В этом примере я не использую React Router, только несколько тегов ‹a›. Но он отзывчивый, так что это весело.
Прежде всего, мне нужно установить точку входа для моей панели навигации в моем файле index.html. Я просто вставлю тег ‹navbar› внутрь тела:
И я, конечно же, не забуду сначала импортировать React и ReactDOM в начало моего файла .js:
Теперь мне нужно создать базовый компонент React. Я собираюсь дать ему имя NavComponent, потому что это имеет слишком много смысла, и внутри функции рендеринга добавим пустой (на данный момент) набор тегов ‹nav›, чтобы обернуть все остальное, что там будет. :
И под всем этим я собираюсь визуализировать компонент внутри тегов ‹navbar› в моем index.html:
Итак, у нас есть базовый компонент, который отображает пустую навигацию. Давайте заполним его!
Я собираюсь создать 2 раздела внутри моего навигационного компонента: один для больших экранов (className="navWide") и один для меньших (className="navNarrow"). И внутри каждого я добавляю 3 набора тегов ‹a› (с фиктивными ссылками).
Вы заметите, что у меня также есть тег ‹i› внутри моего блока класса navNarrow. Это даст мне значок гамбургер (любезно предоставленный Font Awesome) для небольших экранов, которым нужно раскрывающееся меню.
Последнее, что нам нужно сделать с нашим файлом .js, — это заставить работать выпадающее меню. Итак, нам нужно создать функцию (burgerToggle), которая заставляет меню раскрываться и исчезать в зависимости от того, что было нажато. Поскольку наше выпадающее меню содержится в className «narrowLinks», мы собираемся использовать его в нашей функции:
А затем сообщите нашей функции, чтобы она переключала раскрывающийся список в зависимости от текущего значения отображения CSS:
И чтобы новая функция заработала, нам нужно дать нашим тегам ‹i› и ‹a› внутри «navNarrow» onClick:
На этом все заканчивается. И хотя всегда есть стили, которые нужно добавить, я хочу указать на важные вещи.
Я, очевидно, не хочу постоянно видеть оба набора ссылок, и, поскольку мы используем дизайн, ориентированный на мобильные устройства, мы собираемся скрыть наши ссылки «navWide»:
И мы также собираемся прикрепить значок нашего гамбургера и выпадающие ссылки в левой части экрана, просто для забавы:
Итак, установив для нашей иконки значение float:left, об этом позаботились. Мы также установили для отображения «narrowLink» значение none, чтобы они были скрыты до тех пор, пока не сработает наша функция burgerToggle. И мы также стилизовали буквы «a» так, чтобы они отображались в раскрывающемся меню слева. и уложены друг на друга.
И, наконец, медиа-запрос для переключения между нашим мобильным раскрывающимся меню и режимом большего экрана с помощью всего лишь ряда наших ссылок:
Для рабочего примера нажмите здесь. И для нереактивной версии того же самого проверьте это.
