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

Question

[Богдан]

Господа, а не подскажите как правильно сделать менюшку адаптивную с подменю, как бы в компьютерной версии та открытие будет по hover, но на сматрфонах и планшетах там как бы hover и нету. Спасибо.

Comments

[Mesuti]

Покажите, пожалуйста, пример текущего меню

[archelon]

на смартфонах будет открытие по тапу.

[Богдан]

Александр Сорокин, вот

Answer 1

[Dauren Syzdykov]

Вот готовое решение

Comments

[Богдан]

спасибо, но ищу вариант без js

Answer 2

[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;
    }
  }
  
}

Comments

[Богдан]

Спасибо, но как бы display: none; сейчас вообще некошерно использовать, читалки будут тупо игнорировать эти блоки. Ну и основной вопрос, как бы то что на мобильных нет :hover, сделал через :focus

Вот получилась такая менюшка без js.

[profesor08]

Богдан,

как бы display: none; сейчас вообще некошерно использовать, читалки будут тупо игнорировать эти блоки.

Чушь!

Ну и основной вопрос, как бы то что на мобильных нет :hover, сделал через :focus

На мобилках :hover активируется при тапе. С :focus ты не сможешь тыкнуть на пункт меню, так как при напе фокус моментально теряеся с кнопки.

И вообще, такие вещи лучше делать на js.