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


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

 

HTML

В <head>:

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

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

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

В <body>:

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

Шапка (блок headerInner) состоит из логотипа (.logo), блока меню (.menu) и изначально скрытой кнопки меню (.hamburger). При уменьшении ширины экрана ниже 1170px необходимо скрыть блок меню и раскрыть кнопку.

 

CSS

Шапка сверстана с использованием flex, что позволяет легко манипулировать блоками на разном разрешении экрана. Блок шапки «.headerInner» изначально имеет выравнивание по левому краю. При добавлении к этому блоку класса .mobile меняем порядок элементов шапки (с помощью свойства order). Т.е. теперь порядок будет следующим: Логотип, кнопка меню, само меню. Также меняем выравнивание на «space-between» (по ширине) и добавляем шапке (.headerInner) свойство flex-wrap: wrap, что позволяет блоку с меню «перескочить на новую строку», т.е. оказаться ниже логотипа и кнопки.

 

JS

В js функция «resize» отвечает за считывание ширины экрана и если же она меньше 1170 (что можно изменить), то изменяется стиль «display» для меню и блоку «.header» присваивается класс «mobile», о котором говорилось в части CSS.

 

Результат

адаптивное меню js

 

адаптивное раскрывающееся меню js

 

 

 

 

 

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