Адаптивное плавно выпадающее меню js


Адаптивный сайт  — это удобно и практично, а учитывая, что 20-50% посетителе заходят на сайт с мобильных устройств стоит научиться их создавать. В этой статье мы разберем как создать и настроить под себя адаптивное выпадающее меню, написанное на js.

 

HTML

В <head>:

  • Прописываем  мета тега viewport для управления разметкой на мобильных браузерах

  • Подключаем jQuery

  • И скрипт для создания выпадающего меню

В <body>:

Принцип работы:

Имеются 2 меню: <ul class="desktop"&gt; — для широких экранов (более 922px(зададим далее)) и ul в блоке с классом .mobile-menu (изначально скрыт). При нажатии на гамбургер первое скрывается, а второе плавно раскрывается.

 

CSS

С помощью медиа запроса @media only screen and (max-width: 992px) мы скрываем и отображаем требуемые меню при ширине экрана 992px.

 

JS

  1. При клике на .hamburger считывается значение стиля display у блока мобильного меню —  .mobile-menu. Если блок скрыт, то разворачиваем его с помощью функции slideDown(400), где 400 — время трансформации в мс. Если же блок уже раскрыт, то необходимо его свернуть — slideUp(400).
  2. Также меню должно сворачиваться при нажатии на ссылку (например, если это переход к якорю)

 

Результат

 

 

 

 

 

Возможно, вам будет интересно: