Адаптивное многоуровневое фиксированное Jquery меню

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

Понадобилось мне для сайта адаптивное многоуровневое фиксированное Jquery меню. Прогуглил весь интернет. Варианта, удовлетворяющего моим потребностям, не нашёл. Решил сам написать, скрестив несколько меню из интернета, убрав лишнее и добавив необходимое.

Вот что получилось

На компьютере

На смартфоне

Описание адаптивного многоуровневого фиксированного Jquery меню

Характеристики

1. Адаптивное на мобильных и десктопных устройствах

2. Четыре уровня вложенности

3. Использованные фреймворки

• Jquery 3.4.1
• Font Awesome 4.2.0

4. Проверено в десктопных браузерах на Windows

• Яндекс.Браузер 20.2.0.1043
• Google Chrome 79.0.3945.130б
• Firefox 70.0.1
• Opera 66.0.3515.44
• Internet Explorer 11.0.9600.19597 (Отлично работает в IE от 10 версии и выше. В 9 версии второй, третий, четвёртый уровни вложенности в десктопном варианте меню выпадают неплавно.)

5. Проверено в мобильных браузерах на Андроиде

• Яндекс.Браузер 19.12.3
• Chrome 79.0.3945.136
• Firefox 68.4.2
• Opera 55.2.2719.50740

Меню при ширине экрана 1366px на компьютере

Меню на смартфоне с разрешением экрана 1080x1920 с разрешением экрана в браузере 360x516

Демонстрация работы меню на десктопе на разной ширине экрана

Итог

1. Меню работает на десктопном и мобильном устройстве.
2. Меню работает во всех основных браузерах.
3. Кнопка типа "Гамбургер" является фиксированной при вертикальной прокрутке страницы.
4. Плавность меню обеспечена фреймворком Jquery.
5. Ширина, при которой меню переходит в мобильный вид, настраивается.
6. Количество уровней вложенности и пунктов меню редактируются.
7. Меню легко в настройке и подойдёт для сайтов с любыми целями.

Рекомендую

Ознакомтесь с доработанной версией этого меню - адаптивное многоуровневое фиксированное Jquery меню со свайпом

Подарок

Вместе со скачанным адаптивным многоуровневым фиксированным Jquery меню вы получите в подарок демо-сайт. Подробную статью про то, как сделать сайт, скачав это меню, читайте по ссылке: Как сделать сайт