@PHPjedi

Как должно работать меню?

Я впервые делаю меню сам, и есть некоторые моменты, которые я хотел бы уточнить.

Разметка меню примерно такая:

<ul class="header">
	<li class="menuicon">
		<!-- Hamburger -->
	</li>
	<li class="logo">
		<!-- А здесь будет логотип -->
	</li>
</ul>
<ul class="list">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>


При десктопных размерах экрана, я скрываю .header. При мобильном экране скрываю .list. По клику на гамбургер я разворачиваю .list под header.

Таким образом получается меню.

- Вопрос первый касательное меню

Я использую input type="checkbox" hidden для определения в CSS, а не открытали нас меню, или же не закрыта ли...? По input checkbox`у уже можно добавлять и удалять стили.

Пример:

#menustate:checked {}

А состояние input`а я меняю по клике по иконке меню с помощью функции handleClick(), которую написал сам :) .

Да, конечно, можно добавлять и удалять класс. Но этот подход мне не нравится, так как придется много классов создавать. А как можно используя возможности React, не использовать input? Насколько я знаю, в CSS файле никак нельзя получать state. :) Дайте совет, как эту часть реализовать грамотно на ваш взгляд используя React.

- Второй вопрос
Когда меню открыто пользователем и был тап (клик) по любой ссылке, то меню должно закрыться и рераут. Если я напишу на каждый Link onClick={}, я думаю это очень не правильно. Если сайт будет открыт на десктопе, но эти функии попросту не нужны...

Как это все грамотно реализовать? Дайте совет, пожалуйста :)

Спасибо!
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
Robur
@Robur
Знаю больше чем это необходимо
На реакте правильно положить в стейт текущее состояние открыто/закрыто и в зависимости от этого рендерить или нет соответствующую разметку, или навешивать/убирать класс который будет уже регулировать видимость и стили элементов.
Можно и input оставить если это подходит.
Нет никаких проблем написать в каждый Link onClick. тем более таких чтобы это было "очень" неправильно
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы