bogdan_uman
@bogdan_uman
шлЫмазл неукЪ-поцЪ

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

Господа, а не подскажите как правильно сделать менюшку адаптивную с подменю, как бы в компьютерной версии та открытие будет по hover, но на сматрфонах и планшетах там как бы hover и нету. Спасибо.
  • Вопрос задан
  • 640 просмотров
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08
Тут достаточно понимать как работают @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;
    }
  }
  
}
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
КАУС Москва
от 120 000 до 180 000 руб.
Smart Group Москва
от 100 000 руб.
SaveTime Москва
от 140 000 до 200 000 руб.
23 окт. 2018, в 12:31
1000 руб./за проект
23 окт. 2018, в 12:08
1200 руб./за проект
23 окт. 2018, в 11:59
500 руб./за проект