METAIL.RU
  • Главная
  • Категории
    • Prettify
    • SEO
    • Кнопка
    • Меню
    • Навигация
    • Платежи
    • Сайт
    • Скролл
  • Контакты
METAIL.RU
  • Главная        

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

  • Шрифт

  • 14

  • 16

  • 18

  • 20

  • 22

30 Марта 2020Меню

Адаптивное многоуровневое фиксированное 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 меню вы получите в подарок демо-сайт. Подробную статью про то, как сделать сайт, скачав это меню, читайте по ссылке: Как сделать сайт


Cкачиваний: 639   Размер: 3.75 МБ

Демо
Скачать


Назад

Категории

  • Prettify
  • SEO
  • Кнопка
  • Меню
  • Навигация
  • Платежи
  • Сайт
  • Скролл

Рекомендую

Подпишись и ставь лайк

Карта сайта

metail.ru © 2020 - 2021