Как спрятать меню при адаптации?

Question

[Анастасия]

У меня есть вот такое меню:

https://codepen.io/anastasia_pat/pen/ExPmWXp

Подскажите пожалуйста, как при уменьшении экрана (ширина меньше 1000px) спрятать все кнопки и ссылки в отдельном div. Оставить только лого, язык и кнопку, при нажатии на которую будет открываться это меню на целый экран.

Answer 1

[Арсений Матыцин]

В примере на лицо проблема вложенности. Чисто теоретически можно оформить все в одной строке на флексах, которую можно сортировать для специфического отображения на десктопе и на телефоне (порядок лого, выбора языка и всего остального).

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

Край — дублировать что-то. Например один и тот же выбор языка показывать вне блока с навигацией на телефоне, и внутри блока с order-ом на десктопе). Дублировать его будет дешевле, чем всю навигацию.

Ну а если под рукой доступен какой-нить JS-фреймворк, то совсем край можно просто рисовать разные компоненты (генерировать DOM) в зависимости от разрешения.

Answer 2

[Иван Иванов]

const item = document.getElementById("menu");
if(document.documentElement.clientWidth < 1000) {
    item.style.display = "none";
}

Поясню: если ширина видимой части окна меньше 1000px, то мы прячем блок с id=menu

Comments

[Ankhena]

И зачем это делать на js при наличии @media в CSS?

На js нужно обрабатывать клик по кнопке и манипулировать классом (классами), который отвечает за показ блока меню.

[Иван Иванов]

Ankhena, ну в принципе да, но это ужи придирки, нет разницы

[Ankhena]

Максим Фикс,
Стилизация пишется в CSS, разметка в HTML и т.д.
Не стоит делать кашу из проекта на этапе разработки.

[Иван Иванов]

Ankhena, это не пентагон, у него обычный лендинг, понимаю еще что-то посерьезнее было бы

[Арсений Матыцин]

Подписываюсь под словами Ankhena. Использовать в данном кейсе JS, как медиазапрос — бредятина. Есть CSS, в котором это все есть и должно быть, более того в первой волне оформления страницы, а не когда (а то и если) загрузиться JS.