Розберемо, як створити адаптивне меню за допомогою 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>
Ось і все, що потрібно для адаптивного меню.