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

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

HTML

В <head>:

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

1	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Подключаем jQuery

<script src="js/jquery-3.2.1.min.js"></script>

1	<script src="js/jquery-3.2.1.min.js"></script>

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

<script src="js/common.js"></script>

1	<script src="js/common.js"></script>

В <body>:

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

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

  <header>
    <div class="container">
      <div class="headerInner">
        <a href="#" class="logo">webgrind</a>
        <div class="menu">
          <div class="part"><a href="#">Ссылка 1</a></div>
          <div class="part"><a href="#">Ссылка 2</a></div>
          <div class="part"><a href="#">Ссылка 3</a></div>
        </div>
        <div class="hamburger">
          <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
            width="124px" height="124px" viewBox="0 0 124 124"
            xml:space="preserve">
                <path d="M112,6H12C5.4,6,0,11.4,0,18s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,6,112,6z" />
                <path d="M112,50H12C5.4,50,0,55.4,0,62c0,6.6,5.4,12,12,12h100c6.6,0,12-5.4,12-12C124,55.4,118.6,50,112,50z" />
                <path d="M112,94H12c-6.6,0-12,5.4-12,12s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,94,112,94z" />
          </svg>
        </div>
      </div>
    </div>
  </header>

<a href="#" class="logo">webgrind</a>

<div class="part"><a href="#">Ссылка 1</a></div>

<div class="part"><a href="#">Ссылка 2</a></div>

<div class="part"><a href="#">Ссылка 3</a></div>

</div>

width="124px" height="124px" viewBox="0 0 124 124"

xml:space="preserve">

</svg>

</div>

</header>

CSS

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

a {
  color: #fff;
  text-decoration: none; }

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

header {
  background-color: #212326;
  padding: 8px 0;
  position: fixed;
  left: 0;
  width: 100%; }
  header .headerInner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ffffff; }
    header .headerInner .logo {
      text-transform: uppercase;
      font-size: 28px; }
    header .headerInner .menu {
      padding-left: 70px; }
      header .headerInner .menu .part {
        margin: 0 19px;
        width: auto;
        letter-spacing: .5px; }
    header .headerInner .hamburger {
      display: none;
      width: 30px;
      height: 30px; }
      header .headerInner .hamburger svg {
        width: 30px;
        height: 30px;
        fill: #ffffff; }

header.mobile .headerInner {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  header.mobile .headerInner .logo {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0; }
  header.mobile .headerInner .menu {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    width: 100%; }
    header.mobile .headerInner .menu .part {
      text-align: center; }
  header.mobile .headerInner .hamburger {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    display: block; }

a {

color: #fff;

text-decoration: none; }

.container {

max-width: 1170px;

margin: 0 auto;

padding: 0 10px;

-webkit-box-sizing: border-box;

box-sizing: border-box; }

header {

background-color: #212326;

padding: 8px 0;

position: fixed;

left: 0;

width: 100%; }

header .headerInner {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

color: #ffffff; }

header .headerInner .logo {

text-transform: uppercase;

font-size: 28px; }

header .headerInner .menu {

padding-left: 70px; }

header .headerInner .menu .part {

margin: 0 19px;

width: auto;

letter-spacing: .5px; }

header .headerInner .hamburger {

display: none;

width: 30px;

height: 30px; }

header .headerInner .hamburger svg {

width: 30px;

height: 30px;

fill: #ffffff; }

header.mobile .headerInner {

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap; }

header.mobile .headerInner .logo {

-webkit-box-ordinal-group: 1;

-webkit-order: 0;

-ms-flex-order: 0;

order: 0; }

header.mobile .headerInner .menu {

-webkit-box-ordinal-group: 3;

-webkit-order: 2;

-ms-flex-order: 2;

order: 2;

width: 100%; }

header.mobile .headerInner .menu .part {

text-align: center; }

header.mobile .headerInner .hamburger {

-webkit-box-ordinal-group: 2;

-webkit-order: 1;

-ms-flex-order: 1;

order: 1;

display: block; }

JS

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

function resize() {
    var menu = $('header .headerInner .menu');
    var header = $('header');
    var widthHead = header.width();
    if (widthHead < 1170) {
        menu.css({'display':'none'});
        header.addClass('mobile');
    } else {
        menu.css({'display':'flex'});
        header.removeClass('mobile');
    }
}
resize();

$(window).resize(function() {
    resize();
});

$('.hamburger').click(function(){
    element = $('.menu');
    display = element.css('display');
    if(display == 'none')
        $('.menu').slideDown(400);
    if(display == 'block')
        $('.menu').slideUp(400);
});

$('.menu a').click(function(){
    var header = $('header');
    var widthHead = header.width();
    if(widthHead < 1170)
        $('.menu').slideUp(400);
});

function resize() {

var menu = $('header .headerInner .menu');

var header = $('header');

var widthHead = header.width();

if (widthHead < 1170) {

menu.css({'display':'none'});

header.addClass('mobile');

} else {

menu.css({'display':'flex'});

header.removeClass('mobile');

}

resize();

$(window).resize(function() {

resize();

});

$('.hamburger').click(function(){

element = $('.menu');

display = element.css('display');

if(display == 'none')

$('.menu').slideDown(400);

if(display == 'block')

$('.menu').slideUp(400);

});

$('.menu a').click(function(){

var header = $('header');

var widthHead = header.width();

if(widthHead < 1170)

$('.menu').slideUp(400);

});

Результат

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

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

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

Как верстать pixel perfect без плагинов

24.11.2018

Как работает свойство Display в css

28.01.2018