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

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

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

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

5ef1c5116d928430985083.png
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
CEO iAmStudio, предприниматель.
В примере на лицо проблема вложенности. Чисто теоретически можно оформить все в одной строке на флексах, которую можно сортировать для специфического отображения на десктопе и на телефоне (порядок лого, выбора языка и всего остального).

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

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

Ну а если под рукой доступен какой-нить JS-фреймворк, то совсем край можно просто рисовать разные компоненты (генерировать DOM) в зависимости от разрешения.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@maksim_fix
Junior PHP developer
const item = document.getElementById("menu");
if(document.documentElement.clientWidth < 1000) {
    item.style.display = "none";
}

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

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

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