Адаптивная верстка сайта включает в себя массу аспектов и один из них это создание меню. В первую очередь само меню должно находиться в верхней части сайта, желательно рядом с логотипом. В основном в мобильной версии сайта в шапке должен быть только логотип и меню, но об этом поговорим в другой статье. После обследований просторов интернетов мною был найден самый лучший способ его выполнения, как по мне.

Что нам для этого понадобится HTML, CSS, JS, JQuery последней версии.

HTML код

Тут я испльзую fontawesome, тоже полезная штука, но о нем мы поговорим позже.

 

Само меню.

 

CSS код

Сначала опишем размеры кнопки и отцентрируем ее посередине блока

  height: 60px;
  width: 60px;
  line-height: 60px;
  font-size: 36px;
  text-align: center; 

Font-awesome - это в первую очередь шрифт, так что смело можем задавать font-size и text-align.

При нажатии меню должно выводиться поверх всех блоков, для этого мы в css свойствах пишем

position: relative;
z-index: 999;

В ходе тестировок я столкнулся с неработающим меню на яблочных устройствах, для этого нужно всего лишь прописать в свойствах: cursor: pointer;.

.menuButton{
  height: 60px;
  width: 60px;
  line-height: 60px;
  font-size: 36px;
  text-align: center;
  position: relative;
  z-index: 999;
  cursor: pointer;
}

Стили нашего меню

.topMenuBar{
  position: absolute;
  top:0; width: 100%;
  display: none;
  z-index: 998;
}
.topMenuBar ul{
  width: 100%;
  dispay:flex;
  flex-direction: column;
}
.topMenuBar ul li {
  width: 50%; 
  margin: 0 auto;
}

Тот класс который будет добавляться по нажатию.

.showMenu {display:block !important;}

JS код

Данный код полезен тем, что при нажатии на кнопку меню можно добавить массу свойств в наши блоки if.

В JS коде по нажатию мы проверяем или имеет наше меню уже класс showMenu, если нет - добавляем, иначе - удаляем.

$(document).on(click, .menuButton, function(){
     var topMenuBar= document.querySelector(".topMenuBar");
     if (topMenuBar.className.indexOf(" showMenu") == -1)
        {
topMenuBar.className += " showMenu";
     }
     else
    {
      topMenuBar.className = topMenuBar.className.replace(" showMenu", "");
    }
 });