Адаптивне меню з jQuery та CSS

Розберемо, як створити адаптивне меню за допомогою jQuery без використання додаткових бібліотек та CSS. А після невеликих змін його можна адаптувати під будь-який дизайн вебсайту.

Для того, щоб у мобільній версії меню відобразити піктограми меню, необхідно використовувати шрифти Font awesome. Тому необхідно у код добавити код:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Також необхідно додати бібліотеку Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Добавляємо стилі:

ul, li{margin: 0; padding: 0; list-style-type: none}
a{color: inherit; text-decoration: none}
.clearfix:after{content: ""; display: block; clear: both}
.menu li{float: left}
.menu li a{display: inline-block; padding: 10px 15px}
.menuToggle{padding: 10px 15px; display: none; cursor: pointer}

@media screen and (max-width: 600px) {
    .menu{display: none; position: absolute; background: #eee}
    .menu li {float: none}
    .menuToggle{display: inline-block}
}

І JavaScript:

$(function(){
    $('.menuToggle').on('click', function(){
        $('.menu').slideToggle(300, function(){
            $('.fa').toggleClass('fa-bars fa-close');
        });
    });
});

Останнє, що потрібно зробити, це додати HTML код:

<div class="menuToggle"><i class="fa fa-bars"></i></div>
<ul class="menu">
    <li><a href="#">Головна</a></li>
    <li><a href="#">Новини</a></li>
    <li><a href="#">Контакти</a></li>
</ul>

Ось і все, що потрібно для адаптивного меню.