Динамическое превращение вертикальной панели навигации в горизонтальную при изменении размера экрана.

Я пытаюсь создать динамическую панель навигации. По умолчанию я хочу, чтобы панель навигации отображалась вертикально в div, охватывающем всю высоту страницы, но при изменении размера я хочу, чтобы панель стала горизонтальной. Вот картина того, чего я пытаюсь достичь:

введите здесь описание изображения

Я попытался сформировать свой подход на основе предложений W3Schools, добавив display:block; к ul но это ничего не меняет. Мое понимание медиа-запросов не самое лучшее, но я также попытался изменить ширину и высоту левого div (темно-серого):

@media screen and (max-width: 200px) {
    .nav-container{
        width: 100%;
        height: 200px;
        background-color: #333;
        border-bottom: 0.5px solid #333;
    }
}

Каков наилучший подход для достижения этого?

Изменить:

html,
body {
  height: 100%;
  background-color: #fff;
}

body {
  background-color: #fff;
  text-align: center;
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  display: block;
}

.site-wrapper {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

* {
  margin: 0;
  padding: 0;
}

.site-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.nav-container {
  height: 100%;
  width: 200px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-holder {
  position: absolute;
  top: 0;
  text-align: center;
}

.logo-holder img {
  height: auto;
}

#navigation-div {
  margin-top: -300px;
  width: 100%;
}

.nav-ul li a {
  display: block;
}

.nav-link {
  width: 100%;
  display: block;
  text-align: left;
  color: #fff;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #fff;
  color: #333;
}

.nav ul {
  width: 100%;
  padding-left: 0px;
}

.nav ul li {
  list-style-type: none;
  width: 100%;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  margin-left: 15px;
}

.nav li:hover {
  background-color: #fff;
}

.nav li:hover a {
  color: #333;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 160px;
    background-color: #333;
    border-bottom: 0.5px solid #333;
  }
  .nav-container nav,
  .nav-container nav ul,
  .nav-container nav ul li,
  .logo-holder {
    display: inline;
  }
  .logo-holder {
    position: absolute;
    left: 0;
  }
  #navigation-div {
    float: left;
  }
}
<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img src="#" alt="Logo" />
    </div>
    <div id="navigation-div">
      <nav class="nav left-nav-bar">
        <ul class="nav-ul">
          <a class="nav-link active" href="">
            <li>Home</li>
          </a>
          <a class="nav-link" href="">
            <li>Blog</li>
          </a>
          <a class="nav-link" href="">
            <li>Store</li>
          </a>
          <a class="nav-link" href="">
            <li>Contact</li>
          </a>
        </ul>
      </nav>
    </div>
  </div>
</div>


html css navbar
person Freddy    schedule 05.10.2017    source источник
comment
в вашем подходе нет медиа-запроса. Просто добавьте медиа-запрос из вашего кода + float: none;   -  person Toni Michel Caubet    schedule 05.10.2017
comment
Вопросы, требующие справки по коду, должны включать кратчайший код, необходимый для его воспроизведения в самом вопросе, предпочтительно в Фрагмент стека.   -  person Paulie_D    schedule 05.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, ваш медиа-запрос может вообще не вызываться, потому что максимальная ширина довольно мала — 200 пикселей.

Внутри вашего медиа-запроса вам нужно установить свойство отображения элементов навигации и логотипа на встроенное, чтобы они отображались рядом. (Вы также можете использовать для этого flexbox). Вам также потребуется сбросить некоторые свойства, которые определены выше, например, высоту строки элемента логотипа h3.

@media screen and (max-width: 480px) {
  .nav-container{
      width: 100%;
      height: auto;
      background-color: #333;
      border-bottom: 0.5px solid #333;
   }
  .nav-container nav,
  .nav-container nav ul,
  .nav-container nav ul li,
  .logo-holder,
  .logo-holder h3 {
      display: inline;
  }
  .logo-holder h3 {
      line-height: 1;
  }
}
person Andrea Crawford    schedule 05.10.2017
comment
Привет Андреа, спасибо за ваш ответ. Я сформировал свой код на основе вашего подхода, но навигационные ссылки, похоже, не появляются. Может быть, вы видите мой отредактированный вопрос, чтобы увидеть, где я неправильно реализую ваш подход? - person Freddy; 06.10.2017
comment
Привет, Фредди, вы, кажется, используете в своем коде довольно много методов компоновки (поплавки, flexbox, разные отображаемые значения), будет легче отслеживать, как все работает вместе, если вы просто воспользуетесь одним из них. Причина, по которой вы не можете видеть навигационные ссылки, заключается в том, что к #navigation-div применяется верхнее поле -300 пикселей, поэтому оно находится над верхней частью экрана. Используете ли вы Chrome devtools или что-то подобное? Если нет, то очень рекомендую! Это значительно упрощает понимание того, что происходит с вашими элементами. - person Andrea Crawford; 06.10.2017
comment
Вот jsbin с некоторыми комментариями к вашему коду, надеюсь, он будет полезен - person Andrea Crawford; 06.10.2017
comment
Привет, Андреа, спасибо за помощь! Комментарии были очень полезны, они помогли мне понять проблемы, которые я сам создал. Просто чтобы было ясно, моя навигация теперь работает благодаря вам! :) - person Freddy; 09.10.2017