Как скрыть навигацию и показать ее при смене экрана?

Question

[Дмитрий]

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

Но как сделать так, чтобы при table или при уменьшении экрана, исчезали только некоторые блоки и вызывались только через бургер, важно, чтобы это было без дублирования. Как это можно сделать, есть ли какой-нибудь пример?

Для шапки использовал бутстрап , можно как-то с помощью данной библиотеки решить данную задачу?

Answer 1

[kocherman]

Это делается также через media-запросы в CSS

/* Устанавливаем все элементы видимыми */
  .element1 {
    display: block; 
  }
  .element2 {
    display: block; 
  }
  .element3 {
    display: block; 
  }


/* Устанавливаем третий блок невидимым при ширине страницы меньше 992px */
@media screen and (max-width: 992px) {
  .element1 {
    display: block; 
  }
  .element2 {
    display: block; 
  }
  .element3 {
    display: none; 
  }
}

/* Устанавливаем второй и третий блоки невидимыми при ширине страницы меньше 600px */
@media screen and (max-width: 600px) {
  .element1 {
    display: block; 
  }
  .element2 {
    display: none; 
  }
  .element3 {
    display: none; 
  }
}
/* Делаем все элементы видимыми, если у элемента есть класс visible */
.element1.visible,
.element2.visible,
.element3.visible, {
  display: block; 
}

<!-- внутри меню бутерброда делаем ссылки -->
<a href="javascript:document.querySelector('.element1').classList.toggle('visible');">Element1</a>
<a href="javascript:document.querySelector('.element2').classList.toggle('visible');">Element2</a>
<a href="javascript:document.querySelector('.element3').classList.toggle('visible');">Element3</a>

Если какие-то ссылки внутри бутерброда для определённого разрешения лишние, их можно убрать теми же media-запросами, сделав невидимыми аналогично элементам.

Что тут может быть непонятного?