Горизонтальная и вертикальная навигационная панель в зависимости от размера экрана

Question

Я переделываю веб-страницу для друга и пытаюсь устранить кучу пробелов на больших экранах.Один из способов сделать это - взять одну из статических навигационных панелей, сделать ее вертикальной на больших экранах и перевернуть на горизонтальную на меньших экранах.Я не уверен, какой код понадобится для этого.Может ли это быть сделано исключительно с помощью css или это должно быть выполнено с помощью JS / C #?

У меня уже есть каждая версия навигационной панели, когда каждый из них отображается.Смотрите прикрепленные фотографии.

Answer 1

Одно решение, которое я очень рекомендую, это flexbox и медиа-запросы.

См. Эту статью об уловках CSS

Используйте flex-direction: row для вашей горизонтальной панели навигации и flex-direction: столбец для вашей вертикальной панели навигации.Вы можете использовать медиа-запрос для переключения между направлением изгиба столбца и строки в зависимости от ширины экрана.Код медиа-запроса, который вы ищете, выглядит примерно так:

.navbar {
  display: flex
}

/* On screens that are 992px or less, set navbar to horizontal */
@media screen and (max-width: 992px) {
  .navbar {
    flex-direction: column;
  }
}

Посмотрите другие примеры медиа-запросов на w3school