Задать вопрос
bogdan_uman
@bogdan_uman
шлЫмазл неукЪ-поцЪ

Адаптивное меню?

Господа, а не подскажите как правильно сделать менюшку адаптивную с подменю, как бы в компьютерной версии та открытие будет по hover, но на сматрфонах и планшетах там как бы hover и нету. Спасибо.
  • Вопрос задан
  • 715 просмотров
Подписаться 7 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега CSS
Тут достаточно понимать как работают @media и уметь трансформировать отображение элементов. Ничего сложно тут нет.

jsfiddle.net/profesor08/jan8L05t

<nav>
  <button>==</button>
  <ul>
    <li><a href="#">menu item 1</a></li>
    <li><a href="#">menu item 2</a></li>
    <li><a href="#">menu item 3</a></li>
    <li><a href="#">menu item 4</a></li>
  </ul>
</nav>

nav {
  display: flex;
  background: #f5f5f5;
  border-bottom: 1px solid #e2e2e2;
  
  button {
    padding: 10px;
    border: 0;
  }
  
  ul {
    list-style: none;
    margin-left: auto;
    display: flex;

    li a {
      padding: 10px;
      display: inline-block;

      &:hover {
        background: #e2e2e2;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  nav {
    button {
      display: none;
    }
  }
}

@media screen and (max-width: 767.98px) {
  nav {
    position: relative;
    
    button:not(:hover) {
      ~ ul {
        display: none;
      }
    }
    
    ul {
      position: absolute;
      top: 100%;
      left: 0;
      flex-direction: column;
      background: #f5f5f5;
      border: 1px solid #e2e2e2;
    }
  }
  
}
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы