Адаптация сайта к экранам мобильных устройств не обходится без мобильного меню. В этой статье мы расскажем вам как внедрить мобильное меню на ваш сайт.
Вот такое меню мы видим на настольной версии ПК в разрешении 1280 пикселей по ширине экрана:
Узнать как сделать такое меню на сайте мы писали в статье Горизонтальное меню для сайта с помощью HTML+ CSS
При уменьшении экрана до самого популярного планшетного разрешения в 768 пикселей мы видим следующую картину:
Два последних элемента меню перешли на вторую строку, и это затрудняет его использование на планшетах и мобильных устройствах. В этом случае необходимо внедрить мобильное меню на своем сайте.
И так, для начала нам нужно выбрать значок с анимацией бургер меню, который мы будем встраивать на сайт. Для этого заходим на сайт https://jonsuh.com/hamburgers/ и выбираем любую понравившуюся анимацию значка гамбургер. Например возьмем анимацию Vortex, которую встроим в наше мобильное меню.
Чтобы начать использовать наше меню, пишем код:
<button class="hamburger" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
