Мобильное меню

Всем привет! В этот статье будет рассмотрено создание мобильного меню с использованием CSS3 и Javascript (без использования jQuery).

Наша задача – создать красивое меню для мобильных устройств, которое будет плавно открываться и закрываться без тормозов. Как правило, у адаптивных сайтов делают кнопку, по нажатию которой меню либо раскрывается, либо выезжает сбоку. Мы будем реализовывать именно второй вариант. Комментарии в коде будут на английском, т.к. проект лежит в репозитории на github.

Шаг 1. Создаем HTML разметку

На данном этапе нам нужно создать два контейнера – один для меню (cool-menu) и второй для всего содержимого страницы (page-wrapper). В содержимом страницы добавим какой-нибудь заголовок и текст, а также кнопку для активации/деактивации меню:

  ...  <ul id="cool-menu">   <li><a href="/">Home</a></li>   <li><a href="/shop">Shop</a></li>   <li><a href="/about">About Us</a></li>   </ul>      <div id="page-wrapper">   <div class="header">   <h1>Cool Menu</h1>   <a id="cool-menu-toggle" href="#">Click</a>   </div>   <div class="content">   Lorem ipsum dolor sit amet...   </div>   </div>  ...

Порядок расположения этих контейнеров неважен, но логичнее что меню находится выше, чем основное содержание страницы.

Шаг 2. Добавляем CSS стили

Теперь нужно задать расположение всех элементов нашей страницы, а также добавить css классы для анимации. Я задал ширину меню 240px, поскольку, на мой взгляд, такая ширина оптимальна для просмотра на устройствах с небольшим экраном. Вы можете легко адаптировать этот код под свои нужды:

    html, body {   margin: 0;   padding: 0;   font-family: Helvetica, Arial, sans-serif;   height: 100%;  }    #page-wrapper {   position: relative;   z-index: 20; /* Should be greater than menu z-index */   padding: 10px 20px;   background: #fff;   height: 100%;  }    #page-wrapper h1 {   margin: 0;  }    #cool-menu-toggle {   position: absolute;   top: 10px;   right: 10px;   padding: 10px;   border: 1px solid #333;   border-radius: 3px;  }    #cool-menu {   display: none;   height: 100%;   position: absolute;   top: 0;   right: 0;     width: 190px;   padding: 15px 25px;   margin: 0;     list-style: none;   background: #333;   z-index: 10; /* Should be lower than menu z-index */  }    #cool-menu a {   display: block;   color: #fff;   padding: 15px 0;   border-bottom: 1px solid rgba(255, 255, 255, 0.05);  }

Добавьте этот код на страницу. Меню видно не будет, так как для него задано свойство display: none .

На этом шаге некоторые подумали, что теперь можно подключить jQuery и использовать анимацию для того, чтобы двигать меню туда/сюда. Но это будет глючно работать на мобильных устройствах, потому что браузер будет тратить время на пересчёт позиций элементов страницы. К тому же ни к чему подключать библиотеку jQuery, если можно обойтись чистым Javascript: экономия трафика, что немаловажно на мобильных устройствах.

Вместо jQuery анимации будем использовать css свойство translate3d. Благодаря этому, браузер не будет пересчитывать позиции элементов, этой операцией займется видеокарта (GPU). GPU создана для такой работы, поэтому анимация будет происходить быстрее и плавнее, чем при простом переносе элемента.

Чтобы контролировать положение нашего меню, нужно добавить немного кода на Javascript.

Шаг 3. Добавляем логику на Javascript

У разрабатываемого меню может быть 4 положения:

Анимации нет, меню скрыто
Страница двигается влево, меню открывается
Анимации нет, меню открыто
Страница двигается вправо, меню закрывается

Мы будем добавлять определенный класс к элементу body, в зависимости от того, в каком положении находится меню:

    document.addEventListener('DOMContentLoaded', function(event) {      var onTransitionEnd = function() {   var body = document.body, page = document.getElementById('page-wrapper');      body.classList.remove('animating');   body.classList.remove('left');   body.classList.remove('right');      body.classList.toggle('menu-visible');      page.transitionend =    page.webkitTransitionEnd =   page.otransitionend =    page.MSTransitionEnd = null;   };      // Run if toggle menu button was tapped or clicked   document.getElementById('cool-menu-toggle').addEventListener('click', function(e) {   e.preventDefault();      var body = document.body, page = document.getElementById('page-wrapper');    // When the toggle menu link is clicked, animation starts   body.classList.add('animating');      // Set direction of the animation   body.classList.add(body.classList.contains('menu-visible') ? 'right' : 'left');      // add event listeners for transition end event   if (page.addEventListener) {   page.addEventListener('transitionend', onTransitionEnd, false);   page.addEventListener('webkitTransitionEnd', onTransitionEnd, false);   page.addEventListener('otransitionend', onTransitionEnd, false);   page.addEventListener('MSTransitionEnd', onTransitionEnd, false);   } else {   page.attachEvent('transitionend', onTransitionEnd);   page.attachEvent('webkitTransitionEnd', onTransitionEnd);   page.attachEvent('otransitionend', onTransitionEnd);   page.attachEvent('MSTransitionEnd', onTransitionEnd);   }   });  });

Что делает этот код?

Анимации нет, меню скрыто – у body нет классов
Страница двигается влево, меню открывается – body добавляются классы animating и left
Анимации нет, меню открыто – body добавляется класс menu-visible
Страница двигается вправо, меню закрывается – body добавляются классы animating и right

На следующем шаге добавим эти css классы, чтобы реализовать анимацию.

Шаг 4. Добавляем анимацию

Добавим в конец нашего файла со стилями несколько новых правил, которые используют css свойство transition3d:

    /* Animations */    #page-wrapper, #cool-menu {   -webkit-backface-visibility: hidden;   -webkit-perspective: 1000;  }    .animating #cool-menu, .menu-visible #cool-menu {   display: block;  }    .animating #page-wrapper {   transition: transform .25s ease-in-out; /* 250ms transition to page */   -webkit-transition: -webkit-transform .25s ease-in-out;  }    .animating.left #page-wrapper {   transform: translate3d(-240px, 0, 0 ); /* move page to left */   -webkit-transform: translate3d(-240px, 0, 0);  }    .animating.right #page-wrapper {   transform: translate3d(240px, 0, 0); /* move page to right */   -webkit-transform: translate3d(240px, 0, 0);  }    .menu-visible #page-wrapper {   right: 240px;  }

Вы можете легко отредактировать эти стили для того, чтобы изменить время анимации или ширину, на которую нужно отодвигать меню. Осталось только добавить правило для показа меню на мобильных устройствах (не обязательно):

  #cool-menu-toggle {   display: none;  }     @media only screen and (max-width: 768px) {   #cool-menu-toggle {   display: block;   }   }

andy-blog.ru

Меню должно быть видимым

О габургер-меню было написано множество постов, и большинство отзываются о нем негативно.

Эта небольшая кнопочка из трех линий — настоящая проблема. И это больше не о самой иконке, а о том, что она скрывает собой всю навигацию.

Вне поля зрения — вне памяти

Скрытая навигация — довольно логичное решение для маленьких экранов — не нужно париться об ограниченном пространстве экрана, просто поместите всю свою навигацию в прокручиваемую боковую панель, которая по умолчанию скрыта.

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

Вижу и использую

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

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

Панель вкладки: Вместо скрывания опций навигации в сворачиваемую панель, вы выводите их наружу. — Панель вкладки: Вместо скрытия опций навигации в сворачиваемую панель, вы выводите их наружу.

YouTube всегда делает элементы ключевого функционала доступными в одно касание, позволяет быстро переключаться между функциями.

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

И еще кое-что: многие дизайнеры ошибаются, скрывая параметры сортировки в выпадающем меню. Но это ведет к одной и той же проблеме — пользователи видят только выделенную опцию, а другие возможности сортировки скрыты.

Меньшая видимость (выпадающее меню) и большая видимость (переключатель). Источник: uxmovement.

Пример кнопки-переключателя для iOS:

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

Обозначение текущего местоположения

Отсутствие индикации текущего местоположения пользователя — это, возможно, самая распространенная ошибка в построении меню сайтов или приложений. «Где я?» — один из фундаментальных вопросов, на которые пользователю нужно ответить для успешной навигации.

Пользователи опираются на визуальные подсказки из меню, чтобы ответить на этот критически важный вопрос. Но иногда они видят совсем не то, что ожидают увидеть.

Иконки

Есть универсальные иконки, с которыми пользователи хорошо знакомы, и которые представляют популярный функционал по типу поиска, почты, печати и т. д. К сожалению, «универсальные» иконки довольно редки. И дизайнеры приложения часто прячут функционал за иконки, которые очень сложно понять.

Bloom.fm для Android — Предыдущая версия приложения Bloom. fm для Android. Очень сложно понять текущее местоположение пользователя.

Цвета

Текущее состояние можно напрямую обозначить в панели вкладок с помощью контрастных цветов.

Как цвет кнопки управляет вниманием пользователя. Источник: uxmovement.

Хороший пример выделения цветом.

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

Координируйте меню с задачами пользователя

Вы должны использовать только понятные названия ссылок. Выясните, что ищет пользователь и используйте названия категорий, которые понятны и близки вашей целевой аудитории. Меню — это не то место, где стоит шутить с жаргоном. Используйте терминологию, которая четко описывает ваш контент и функционал.

Пользователи любят мобильные приложения, которые быстро решают какой-то конкретный кейс. И вы можете сократить время, которое нужно потратить пользователю, на понимание меню.

Сложные функции должны всегда отображаться с соответствующей текстовой меткой.
Вывод: Элементы меню должны быть легко сканируемы. Пользователи должны иметь возможность понимать, что конкретно происходит, когда они касаются пальцем того или иного элемента.

Делайте манипуляции простыми

Слишком маленькие или слишком близко расположенные друг к другу элементы доставляют огромный дискомфорт мобильным пользователям. Так что делайте ссылки меню достаточно большими, чтобы их можно было легко кликнуть или коснуться пальцем.

В исследовании MIT Touch Lab было установлено, что средняя ширина указательного пальца взрослого человека составляет 1.6 — 2 см. Это равноценно 45−57 пикселям.

Средняя ширина указательного пальца в пикселях. Источник: uxmovement.

Ширина области касания в 45 — 57 пикселей позволяет пальцу пользователя легко выполнить свою задачу, получить четкий визуальный отклик.

Вывод: меню должно иметь удобный для пальцев дизайн. Соразмерность элементов со средним размером пальцев гораздо улучшает юзабилити мобильных интерфейсов.

Заключение

Помощь пользователям в навигации должна быть в высоком приоритете практически для любого сайта или приложения. Цель удобной навигации — создание системы взаимодействия, которая естественным путем сочетается с ментальными моделями пользователей.

Простые сценарии поведения пользователей, четкая графика и визуальные подсказки создают иллюзию того, что способности пользователя способствуют гладкому и удобному взаимодействию с приложением. И ваша система взаимодействий должна доносить задачи до пользователей через четкую визуальную коммуникацию.

Вы создаете дизайны для своих пользователей. Чем проще ваш продукт в использовании, тем вероятнее, что его будут использовать.

Спасибо!

ux.pub

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css — со шрифтами-иконками

HTML

Меню представляет из себя неупорядоченный список:

<nav>      <ul class="menu">          <li>              <a href="#"><i class="icon-home"></i>Главная</a>              <ul class="sub-menu">                  <li><a href="#">Подменю 1</a></li>                  <li><a href="#">Подменю 2</a></li>                  <li><a href="#">Подменю 3</a></li>              </ul>          </li>          <li>              <a  href="#"><i class="icon-user"></i>О нас</a>          </li>          <li>              <a  href="#"><i class="icon-camera"></i>Портфолио</a>              <ul class="sub-menu">                  <li>                      <a href="#">Подменю 1</a>                  </li>                  <li>                      <a href="#">Уровень 3 меню</a>                      <ul>                          <li><a href="#">Подменю 4</a></li>                          <li><a href="#">Подменю 5</a></li>                          <li><a href="#">Подменю 6</a></li>                      </ul>                  </li>              </ul>          </li>          <li>              <a  href="#"><i class="icon-bullhorn"></i>Блог</a>          </li>          <li>              <a  href="#"><i class="icon-envelope-alt"></i>Контакты</a>          </li>      </ul>  </nav>

Для добавления иконок, нужно просто добавить соответствующий иконке класс к тегу i — например, icon-home, icon-camera и т.п.

CSS

Посмотрим на CSS для десктопного меню первого уровня:

.menu{      display:block;  }  .menu li{      display: inline-block;      position: relative;      z-index:100;  }  .menu li a {      font-weight:600;      text-decoration:none;      padding:11px;      display:block;      color:#ffffff;         -webkit-transition: all 0.2s ease-in-out 0s;      -moz-transition: all 0.2s ease-in-out 0s;      -o-transition: all 0.2s ease-in-out 0s;      -ms-transition: all 0.2s ease-in-out 0s;      transition: all 0.2s ease-in-out 0s;  }  .menu li a:hover,  .menu li:hover > a{      color:#ffffff;      background:#9CA3DA;  }

Мы будем скрывать меню второго уровня и раскрывать его, когда пользователь наведет курсор на элемент меню первого уровня.

/* скрываем меню второго уровеня */  .menu ul {      display: none;      margin: 0;      padding: 0;      width: 150px;      position: absolute;      top: 43px;      left: 0px;      background: #ffffff;  }  /* показываем меню второго уровня при наведении */  .menu li:hover > ul{      display: block;  }  .menu ul li {      display:block;      float: none;      background:none;      margin:0;      padding:0;  }  .menu ul li a {      font-size:12px;      font-weight:normal;      display:block;      color:#797979;      border-left:3px solid #ffffff;      background:#ffffff;  }  .menu ul li a:hover,  .menu ul li:hover > a{      background:#f0f0f0;      border-left:3px solid #9CA3DA;      color:#797979;  }

Меню третьего уровня будет иметь такие же свойства, как и у меню второго уровня, за исключением позиционирования:

/* Изменение позиций для меню третьего уровня */  .menu ul ul {      left: 149px;      top: 0px;  }

Теперь добавим адаптивности, и рассмотрим из чего строится мобильная версия меню.
При уменьшении размера окна менее, чем 760px у нас меню заменится кнопкой-ссылкой, которая в десктопной версии скрыта.

<a id="touch-menu" class="mobile-menu" href="#">      <i class="icon-reorder"></i>      Меню  </a>

Уникальный идентификатор touch-menu будем использовать в jаvascript коде, для обращения к меню.
Ниже css свойства для кнопки Меню:

.mobile-menu{      display:none;      width:100%;      padding:11px;      background:#3E4156;      color:#ffffff;      text-transform:uppercase;      font-weight:600;  }  .mobile-menu:hover{      background:#3E4156;      color:#ffffff;      text-decoration:none;  }

Ниже свойства CSS для мобильной версии меню.

@media (max-width: 760px) {         .menu{display:none;}         .mobile-menu{          display:block;          margin-top:100px;      }         nav{          margin:0;          background:none;      }         .menu li{          display:block;          margin:0;      }         .menu li a {          background:#ffffff;          color:#797979;          border-top:1px solid #e0e0e0;          border-left:3px solid #ffffff;      }         .menu li a:hover,      .menu li:hover > a{          background:#f0f0f0;          color:#797979;          border-left:3px solid #9CA3DA;      }         /*level 2 and 3 - make same width as all items*/      .menu ul {          display:block;          position:relative;          top:0;          left:0;          width:100%;      }         .menu ul ul {          left:0;      }     }/*end media queries*/

JS

Подключаем jQuery и файл с кодом для мобильной версии:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/jаvascript" ></script>  <script src="js/menu.js" type="text/jаvascript"></script>

Ниже приведено содержимое файла menu.js — код используемый в мобильной версии.

При нажатии на кнопку-ссылку Меню с эффектом slide появляется вся наша навигация вместе с выпадающими подпунктами.

$(document).ready(function(){         var touch = $('#touch-menu');      var menu = $('.menu');         $(touch).on('click', function(e) {          e.preventDefault();          menu.slideToggle();      });      $(window).resize(function(){          var w = $(window).width();          if(w > 760 && menu.is(':hidden')) {              menu.removeAttr('style');          }      });     });

Если размер окна браузера более 760px, то мы удаляем инлайновые свойства у .menu и внешний вид навигации вернется к десктопному варианту.

pcvector.net

Мобильное меню для сайта html код

Прежде всего, давайте добавим meta viewport внутри тега head. Этот тег необходим для правильного масштабирования нашей страницы на мобильных устройствах.

А затем добавьте следующий фрагмент кода в качестве разметки меню внутри тега body.

Как вы можете видеть выше у нас есть 6 пунктов меню и ссылка после тега ul. Эта ссылка будет открывать мобильное меню сайта на маленьких устройствах.

Css стилизация меню

В этой части статьи мы начнем стилизацию меню. Стиль будет не идеальный, и вы можете выбрать любые цвета и дизайн по вашему желанию. В нашем примере будет у body кремовый цвет.

Тэг nav, который определяет навигацию, будет иметь ширину 100%, в то время как ul, который содержит наши основные ссылки меню, будет 600px в ширину и выровнен по центру окна браузера.

Теперь мы выровняем элементы меню горизонтально друг за другом, после их выравнивания произойдет float collapse родительского элемента.

Выше в разметке HTML вы могли заметить класс clearfix в nav и ul, этот класс был добавлен для того что бы решить проблему с float элементами, эта техника называется CSS clearfix. Итак, добавим следующие правила в таблицу стилей.

Так как у нас шесть пунктов меню, и мы задали контейнеру ul width: 600px, у каждой ссылки меню будет ширина 100px.

Пункты меню будут разделены между собой правой рамкой размером 1px, кроме последнего. Исходя из простой блочной модели, рамка увеличит наш элемент на 1px и его ширина будет равна 101px. Чтобы это исправить и рамка не входила в ширину ссылки необходимо ей добавить css правило box-sizing:border-box;

Далее добавим стили для состояния ссылки :hover и :aсtive

И последнее что мы сделаем это скроем элемент на больших разрешениях, который будет открывать мобильное меню сайта.

На данном этапе мы только задали основные стили для меню, и при уменьшении окна браузера или просмотра с мобильных устройств ничего происходить не будет. Давайте перейдем к следующему шагу.

CSS медиа запросы для меню

CSS3 медиа запросы используются для определения стилей для разных устройств, а так же в контрольных точках. К примеру на телефонах это от 320px до 767px, планшеты до 1024px.

Нашей первой контрольной точкой будет ширина 600px и меньше. Так как ширина меню 600px и при большем разрешении все будет выглядеть хорошо.

Когда ширина экрана будет равна 600px нам нужно задать ширину ul 100%, а элементы меню разместить друг за другом в две колонки. Ширина каждого будет равна 50% от ширины ul.

Следующее что мы сделаем это определим как себя будет вести меню на экранах меньше 480px, это будет нашей второй контрольной точкой.

На этом разрешении мы сделаем видимым ссылку с id=’pull’, которую мы добавили и скрыли ранее. Добавим ей немного стилей с помощью псевдоэлемента ::after. А элементы меню будут скрыты для более компактного отображения меню.

И наконец когда экран равен или меньше 320px элементы меню будут расположены по горизонтали сверху в низ, и ширина будет равна 100%.

Теперь мы можем уже проверить адаптивность меню в браузере. Последнее что осталось это заставить меню открываться и закрываться по нажатию ссылки с id=’pull’.

jQuery код для мобильного меню.

На данный момент меню по-прежнему будет скрыто и будет отображаться только тогда, когда это необходимо, по тапу или щелчку ссылки «Меню», и мы сможем добиться этого, используя jQuery функцию slideToggle().

Далее нам нужно исправить небольшой bug, когда вы изменяете размер окна браузера сразу после того, как вы только что просмотрели и спрятали меню на маленьком экране, меню останется скрытым. Итак, удалить стиль который скрывает меню при изменении размера окна можно при помощи кода ниже:

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

comments powered by HyperComments

webupblog.ru

Вы хотели бы создать меню, адаптированное под мобильные устройства? Трафик мобильных устройств уже давно превышает десктопный на многих ресурсах. Добавление мобильного адаптивного меню существенно упрощает навигацию для пользователей вашего сайта. В этой статье мы покажем вам как легко создать адаптивное меню под мобильные устройства в WordPress.

В статье мы покажем как реализовать задуманное с помощью плагина (для новичков, без кода), а также — с помощью кода для более продвинутых пользователей.

В конце материала вы научитесь создавать выезжающее мобильное меню, выпадающее, а также раскрывающееся меню под моб.устройства.

Готовы? Начинаем.

Способ 1: Добавляем адаптивное меню в WordPress с помощью плагина

Этот способ достаточно простой и рекомендуется для новичков, т.к. не потребует добавления кода.

Здесь мы будем создавать меню-бутерброд, которое выезжает на мобильных разрешениях экрана.

Первым делом вам потребуется установить и активировать плагин Responsive Menu.

После активации плагин добавит новый элемент меню под названием ‘Responsive Menu’ в админбар. Нажав на него, вы окажетесь на странице настроек плагина.

Для начала потребуется указать ширину экрана, при которой плагин начнет отображать адаптивное меню. Значение по-умолчанию установлено в 800px, и оно подойдет для большинства сайтов.

После этого нужно выбрать меню, которое нужно использовать для вашего адаптивного меню. Если же вы еще не создали меню, тогда сделать это можно на странице Внешний вид » Меню.

Последней опцией на экране будет указание CSS класса для вашего текущего НЕ адаптивного меню. Это позволит плагину скрывать ваше не адаптивное меню на маленьких экранах.

Не забудьте нажать на кнопку ‘Update Options’ для того, чтобы сохранить изменения.

Теперь переходим на сайт и изменяем размер окна браузера для того, чтобы увидеть адаптивное меню в действии.

В плагине есть множество других полезных опций, которые позволят вам изменять поведение и внешний вид адаптивного меню.

Способ 2: Добавляем меню в виде выпадающего списка с помощью плагина

Еще одним способом добавления адаптивного меню является добавления меню в виде выпадаюшего списка. Этот способ также не потребует знания кода, поэтому и рекомендуется для новичков.

Для начала вам потребуется установить и активировать плагин Responsive Select Menu.

После активации переходим в Внешний вид » Responsive Select для настроки плагина.

Прокручиваем до раздела ‘Activate theme locations’. По-умолчанию, плагин активируется для всех расположений меню в теме. Можно изменить это поведение, оставив его только для нескольких областей.

Не забудьте нажать на кнопку сохранения изменений.

Теперь переходим на свой сайт, меняем размер браузера для того, чтобы увидеть меню в виде выпадающего списка.

Способ 3: Создаем адаптивное мобильное меню с раскрывающимся (toggle) эффектом

Одним из самых часто используемых способов вывода меню на мобильные экраны является использование раскрывающегося эффекта.

Способ предполагает добавление кода в файлы вашей WordPress темы.

Для начала открываем текстовый редактор типа Блокнот и вставляем этот код:

  ( function() {  	var nav = document.getElementById( 'site-navigation' ), button, menu;  	if ( ! nav ) {  		return;  	}    	button = nav.getElementsByTagName( 'button' )[0];  	menu = nav.getElementsByTagName( 'ul' )[0];  	if ( ! button ) {  		return;  	}    	// Скрываем кнопку, если меню отсутствует или пустое.  	if ( ! menu || ! menu.childNodes.length ) {  		button.style.display = 'none';  		return;  	}    	button.onclick = function() {  		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {  			menu.className = 'nav-menu';  		}    		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {  			button.className = button.className.replace( ' toggled-on', '' );  			menu.className = menu.className.replace( ' toggled-on', '' );  		} else {  			button.className += ' toggled-on';  			menu.className += ' toggled-on';  		}  	};  } )(jQuery);

Теперь сохраняем этот файл как navigation.js на своем компьютере.

Далее, открываем FTP-клиент для того, чтобы загрузить этот файл в папку /wp-content/themes/your-theme-dir/js/ вашего сайта.

Замените your-theme-directory на папку вашей текущей теме. Если же в ней нет папки js, то потребуется ее создать.

После загрузки JavaScript файла, нужно будет подключить на сайт. Добавляем код в файл functions.php вашей темы или в плагин для сайта WordPress:

  wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

Теперь добавляем меню навигации в свою тему WordPress. Обычно меню навигации добавляется в файл header.php темы.

[/php]

Предполагается, что расположение меню в вашей теме называется primary. Если это не так, тогда используйте положение меню, определенное в вашей теме.

Последним шагом будет добавление CSS, чтобы наше меню использовало правильные CSS классы для раскрытия на мобильных устройствах.

  /* Меню навигации */  .main-navigation {  	margin-top: 24px;  	margin-top: 1.714285714rem;  	text-align: center;  }  .main-navigation li {  	margin-top: 24px;  	margin-top: 1.714285714rem;  	font-size: 12px;  	font-size: 0.857142857rem;  	line-height: 1.42857143;  }  .main-navigation a {  	color: #5e5e5e;  }  .main-navigation a:hover,  .main-navigation a:focus {  	color: #21759b;  }  .main-navigation ul.nav-menu,  .main-navigation div.nav-menu > ul {  	display: none;  }    .main-navigation ul.nav-menu.toggled-on,  .menu-toggle {  	display: inline-block;  }    // CSS для использования на мобильных устройствах    @media screen and (min-width: 600px) {    .main-navigation ul.nav-menu,  	.main-navigation div.nav-menu > ul {  		border-bottom: 1px solid #ededed;  		border-top: 1px solid #ededed;  		display: inline-block !important;  		text-align: left;  		width: 100%;  	}  	.main-navigation ul {  		margin: 0;  		text-indent: 0;  	}  	.main-navigation li a,  	.main-navigation li {  		display: inline-block;  		text-decoration: none;  	}  	.main-navigation li a {  		border-bottom: 0;  		color: #6a6a6a;  		line-height: 3.692307692;  		text-transform: uppercase;  		white-space: nowrap;  	}  	.main-navigation li a:hover,  	.main-navigation li a:focus {  		color: #000;  	}  	.main-navigation li {  		margin: 0 40px 0 0;  		margin: 0 2.857142857rem 0 0;  		position: relative;  	}  	.main-navigation li ul {  		margin: 0;  		padding: 0;  		position: absolute;  		top: 100%;  		z-index: 1;  		height: 1px;  		width: 1px;  		overflow: hidden;  		clip: rect(1px, 1px, 1px, 1px);  	}  	.main-navigation li ul ul {  		top: 0;  		left: 100%;  	}  	.main-navigation ul li:hover > ul,  	.main-navigation ul li:focus > ul,  	.main-navigation .focus > ul {  		border-left: 0;  		clip: inherit;  		overflow: inherit;  		height: inherit;  		width: inherit;  	}  	.main-navigation li ul li a {  		background: #efefef;  		border-bottom: 1px solid #ededed;  		display: block;  		font-size: 11px;  		font-size: 0.785714286rem;  		line-height: 2.181818182;  		padding: 8px 10px;  		padding: 0.571428571rem 0.714285714rem;  		width: 180px;  		width: 12.85714286rem;  		white-space: normal;  	}  	.main-navigation li ul li a:hover,  	.main-navigation li ul li a:focus {  		background: #e3e3e3;  		color: #444;  	}  	.main-navigation .current-menu-item > a,  	.main-navigation .current-menu-ancestor > a,  	.main-navigation .current_page_item > a,  	.main-navigation .current_page_ancestor > a {  		color: #636363;  		font-weight: bold;  	}  	.menu-toggle {  		display: none;  	}    	}

Теперь переходим на свой сайт и изменяем размер браузера для того, чтобы увидеть адаптивное раскрывающееся меню в действии.

Возможные проблемы: В зависимости от вашей WordPress темы вам потребуется поправить CSS.

Способ 4: Добавляем выезжающее мобильное меню в WordPress

Еще одной распространенной техникой добавления мобильного меню является использование выезжающей панели меню (как показано в Способе 1).

Способ 4 предполагает добавление кода в файлы вашей темы, и это способ такой же реализации меню как в Способе 1.

Для начала открываем текстовый редактор типа Блокнот и добавляем код в пустой текстовый файл.

  (function($) {  $('#toggle').toggle(   function() {   $('#popout').animate({ left: 0 }, 'slow', function() {   $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');   });   },   function() {   $('#popout').animate({ left: -250 }, 'slow', function() {   $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');   });   }  );  })(jQuery);

Не забудьте заменить example.com на название своего домена, и your-theme на вашу текущую тему. Сохраняем этот файл под именем slidepanel.js на компьютере.

Теперь нам понадобится изображение, которое будет использоваться для иконки меню. Значок гамбургера является наиболее часто используемым для этих целей. Такого рода изображений вы сможете найти на различных сайтах. Мы будем использовать значок для меню из библиотеки Google Material Icons.

Когда вы найдете картинку, которую будете использовать, сохраните её под именем menu.png.

Далее, открываем FTP-клиент и загружаем файл slidepanel.js в папку /wp-content/your-theme/js/.

Если в папке с вашей темой нет директории JS, тогда нужно будет создать ее и затем загрузить файлы.

После этого заливаем файл menu.png в папку /wp-content/themes/your-theme/images/.

Как только файлы будут загружены, нам нужно будет убедиться в том, что ваша тема подгружает файл JavaScript, который только что был добавлен. Для этого мы воспользуемся специальной функцией WordPress.

Добавляем следующий код в файл functions.php темы:

  wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Теперь нам нужно добавить код вывода меню навигации в файл header.php темы. Вам потребуется найти примерно такой код:

  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Код нужно будет обернуть в HTML код для вывода выезжающего меню на маленьких экранах.

  <div id="toggle">  <img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Показать" /></div>  <div id="popout">  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>  </div>

Обратите внимание, что меню навигации вашей темы осталось на месте. Мы всего лишь обернули его в HTML, который нужен для реализации задуманного меню.

Последним шагом будет добавление CSS для того, чтобы скрывать картинку меню на больших экранах. Также вам потребуется настроить расположение значка меню.

Ниже приведен пример CSS, который можно использовать для начала:

  @media screen and (min-width: 769px) {  #toggle {  display:none;  }    }    @media screen and (max-width: 768px) {  #popout {  position: fixed;  height: 100%;  width: 250px;  background: rgb(25, 25, 25);  background: rgba(25, 25, 25, .9);  color: white;  top: 0px;  left: -250px;  overflow:auto;  }    #toggle {  float: right;  position: fixed;  top: 60px;  right: 45px;  width: 28px;  height: 24px;  }    .nav-menu li {  border-bottom:1px solid #eee;  padding:20px;  width:100%;  }    .nav-menu li:hover {  background:#CCC;  }    .nav-menu li a {  color:#FFF;  text-decoration:none;  width:100%;  }  }

В зависимости от вашей WordPress темы вам может потребоваться настроить CSS для избежания конфликтов.

Вот как меню будет примерно выглядеть:

Мы надеемся, что эта статья помогла вам научиться создавать адаптивное меню под мобильные устройства в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

wpincode.com

В этой статье речь пойдёт о том, как создать меню для мобильной версии сайта, которое бы вписывалось в адаптивный дизайн. Рассказать я хочу про плагин для JQuery под названием mmenu (можете сходить по ссылке чтобы скачать плагин и сразу посмотреть как будет выглядеть меню, которое мы будем делать). Плагин мы будем использовать, потому что строить свой велосипед каждый раз — не лучшая из практик. Наш путь — использовать наработки. Начнём.

Подключение.

Автор советует использовать html 5 doctype, ну тут я думаю альтернативы нам и не нужны, используем его. В области head нашего документа нам нужно подключить сам JQuery и два файла плагина, подключаем:

<head>  <script src="jquery/jquery.js" type="text/javascript"></script>  <script src="mmenu/dist/js/jquery.mmenu.min.js" type="text/javascript"></script>  <link href="mmenu/dist/css/jquery.mmenu.css" type="text/css" rel="stylesheet" />

Если нам нужно on-canvas меню, тогда нужно подключать файлы jquery.mmenu.oncanvas.min.js и jquery.mmenu.oncanvas.css. On-canvas — это такая версия меню, которая имеет position:absolute; width:100%; height:100%, что растягивает её на весь экран.

Создаём меню

Меню создаётся очень просто — как неупорядоченный html-список, плагин поддерживает вложенность списков. Всё это должно быть обёрнуто в тег nav, у которого задан id.

<nav id="my-menu">  <ul>  <li><a href="/">Home</a></li>  <li><a href="/about/">About us</a>  <ul>  <li><a href="/about/history/">History</a></li>  <li><a href="/about/team/">The team</a></li>  <li><a href="/about/address/">Our address</a></li>  </ul>  </li>  <li><a href="/contact/">Contact</a></li>  </ul> </nav>

Стили меню

1. Плагин если встречает вложенный список, то внутрь родительского li тега добавляет ссылку, к той которая уже есть внутри этого li. При нажатии на добавленную ссылку открывается подменю. Чтобы сделать элемент меню ссылкой на подменю полностью, а не двумя ссылками, нужно использовать тег span.

<nav id="my-menu">  <ul>  <li><a href="/">Home</a></li>  <li><span>About us</span>  <ul class="Vertical">  <li><a href="/about/history/">History</a></li>  <li><a href="/about/team/">The team</a></li>  <li><a href="/about/address/">Our address</a></li>  </ul>  </li>  <li><a href="/contact/">Contact</a></li>  </ul> </nav>

2. Чтобы сделать подменю всегда видимым, нужно добавить к нему класс «Inset».
3. Добавьте класс «Selected» к элементу меню, чтобы сделать его выделенным.
4. Можно создавать разделители следующим образом

<nav id="my-menu">  <ul>  <li class="Divider">Website</li>  <li><a href="/">Home</a></li>  <li><a href="/about/">About us</a></li>  <li><a href="/contact/">Contact</a></li>  </ul> </nav>

Javascript

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

<button id="mmenu-icon" class="Fixed hamburger hamburger--collapse" type="button">  <span class="hamburger-box">  <span class="hamburger-inner"></span>  </span> </button>

Класс Fixed я использовал чтобы установить position:fixed

Чтобы наше мобильное меню заработало, осталось только подключить следующий javascript код на страницу:

$(document).ready(function() {   var $menu = $("#my-menu").mmenu();   var $icon = $("#mmenu-icon");   var API = $menu.data( "mmenu" );    $icon.on( "click", function() {   API.open();   });    API.bind( "opened", function() {   setTimeout(function() {   $icon.addClass( "is-active" );   }, 100);   $icon.on( "click", function() {   API.close();   });   });   API.bind( "closed", function() {   setTimeout(function() {   $icon.removeClass( "is-active" );   }, 100);   $icon.on( "click", function() {   API.open();   });   });  });

Проблемы

Используя mmenu я столкнулся с двумя проблемами. Сначала я пытался обернуть всё содержимое body в тег div, потому что это нужно чтоб плагин работал. Но в этом случае он почему-то скрывал всё содержимое, которое я оборачивал. Поэтому я отказался от этого. Если вы не завернёте всё в что у вас в body в div, то плагин сделает это за вас. Но тут будут проблемы двойного запуска js-скриптов и другие. После этого я сразу столкнулся со второй проблемой: плагин не оборачивает ничего кроме div. То есть если у вас есть h1 непосредственно внутри body (body > h1), как например было у меня, то mmenu их пропустит и будет оборачивать div’ы которые за ним. Это я решил просто оборачиванием в div всех других тегов, так чтобы непосредственно внутри body остались только div’ы.

На этом у меня всё заработало. Надеюсь эта статья оказалась вам полезна.

habr.com

10 потрясающих плагинов для создания мобильного меню у себя на сайте

Shifter

Shifter это плагин JQuery для простого выдвижной мобильной навигации. Shifter работает путем проверки целевых элементов в DOM и обязательным события с ними.

SlickNav

SlickNav является отзывчивым плагином мобильного меню для JQuery с функциями, как поддержка меню многоуровневой, совместимость с различными браузерами, гибкий, простой разметки и ухудшает изящно без JavaScript.

Menutron

Menutron преобразует ваши навигационные меню из списка в меню выбора при изменении размера браузера. На мобильных устройствах, выберите меню подъезжает собственного элемента управления, что делает его легче выбрать пункт.

Отзывчивое и сенсорное меню

Учебник для создания гибкой и сенсорный дружественный выпадающий навигацию. Методика состоит из 3 основных частей, которые Простая навигация выпадающий на основе HTML и CSS, реализация Отзывчивость использованием средств массовой информации запросов и принятие их для устройств с сенсорным экраном с помощью супер крошечной плагина JQuery.

jQuery.mmenu

MMENU это плагин JQuery для создания гладкой, приложение Двойник раздвижные меню для вас мобильный веб-сайт или реагировать на сайте.

Navobile

JQuery Navobile это плагин JQuery, что делает мобильной навигации легко. Navobile использует CSS применять переводы CSS3, обнаружение мобильных устройств и фиксации положения навигации.

FlexNav

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

Отзывчивое Retina-Ready меню

Адаптивное меню с тремя раскладками для различных размеров браузера. Меню автоматически меняется на одном из трех различных раскладок в зависимости от размера окна браузера: «рабочий стол» рядный версии, две колонки планшет оптимизированной версии и мобильная версия со ссылкой меню для отображения и скрытия навигацию для небольших экранов. В качестве иконок использован шрифт, чтобы избежать замыливания при разном разрешении.

slimMenu

slimMenu представляет собой легкий плагин JQuery, который сделан для создания быстрых и многоуровневые меню навигации на fly.With slimMenu, вы больше не будете бороться с запросами СМИ, чтобы создать отзывчивые меню, или любые другие тяжелые плагины для создания многоуровневых вложенные меню. Это 100% мобильного реагирования.

Горизонтальное выдвижное меню

Простой, горизонтальный слайд меню с макета миниатюрами сетке, как для подменю.Меню выдвигается сверху, когда пункт главного меню щелчке и подпункты исчезать дюйма После нажатия другой элемент, высота подменю будет регулировать и содержание будет исчезать в и при переключении.

smagloiv.ru

Создание адаптивного меню при помощи плагина

Для создания мобильного меню на сайте мы воспользуемся плагином Responsive Menu.

Устанавливаем его как обычно. Переходим в раздел «Плагины» => «Добавить новый», вставляем название плагина, устанавливаем и, после установки активируем.

После активации, у нас в боковом меню административной панели появился пункт «Responsive Menu». Нажав на него попадаем в раздел настроек. Все настройки плагина идут на английском языке и это немного усложняет процесс задания нужных параметров.

Вкладка «Settings»

Здесь можно при желании включить возможность вывода данного меню при помощи шорткода. Все остальные настройки на этой вкладке оставляем как есть.

Вкладка «Look & Feel»

На этой вкладке есть целая куча настроек внешнего вида мобильно меню WordPress. Но совсем не обязательно их все задавать. Достаточно задать только несколько, которые вам понадобятся. Сейчас я коротко расскажу у наиболее полезных из них.

1.«Click Button Title» — здесь мы можем задать текст для кнопки, по щелчку на которую будет разворачиваться адаптивное мобильное меню. Вы, так же, можете оставить это поле пустым и, в этом случае, у вас будет высвечиваться только иконка.
2.«Click Button Image» — даёт возможность загрузить изображение для иконки меню.
3.«Fixed Positioning» — позволяет задать фиксированную позицию мобильного меню и при прокрутке страницы оно будет оставаться в том месте где мы укажем.
4.«Click Trigger» — позволяет изменить идентификатор кнопки для открытия меню.
5.«Click Menu Title Height» — здесь можно задаем размер шрифта для надписи «Меню»
6.«Click Button Title Position» — даёт возможность выбрать положение надписи относительно иконки. Надпись может располагаться под иконкой, над иконкой, слева или справа иконки.
7.В раздел «Click Button Size Settings» можно задать ширину и толщину линий и расстояние между тремя линиями, которые располагаются в иконке.
8.В разделе «Click Button Location Settings» мы задаем расположение кнопки меню. Можно задать отступ сверху в пикселях (Top) и отступ слева или справа (Left/Right Distance) в процентах. Сначала мы выбираем, откуда мы будем делать отступ (слева или справа), а затем, задаем проценты.
9.В разделе «Menu Settings» в поле «Menu Title» мы можем ввести текст, который будет отображаться в самом верху открывшегося меню.
10.Далее, если у вас на сайте сделано несколько меню, то, при помощи параметра «Choose Menu To Responsify», вы можете выбрать то меню, которое вы хотите сделать мобильным.
11.«Menu Image» даёт возможность задать изображение, которое будет отображаться рядом с текстом в уже открывшемся мобильном меню.
12.«Slide Side» — здесь выбираем, с какой стороны будет выезжать наше меню. Оно может выезжать справа, слева, сверху или снизу.

Все остальные пункты в этом разделе я обычно оставлю по умолчанию.

13.«Sub Menu Arrow Settings». Если у вас на сайте реализовано многоуровневое меню и у вас будут вложенные пункты, то вы здесь можете задать иконку для сворачивания и разворачивания для вложенных пунктов, либо загрузить для них изображение, для того чтобы их можно было их открывать и зарывать.
14.В разделе «Colour Settings» мы можем, прежде всего, задать цвет текста для кнопки меню по нажатии на которую будет открываться наше мобильное меню, а так же цвет фона. Для этого, щелкаем по кнопке «Выбрать цвет», и затем при помощи палитры, выбираем тот оттенок, который вам нужен, и щелкаем на пустом месте.
15.В разделе «Main Menu» мы можем задать фоновые цвета для выезжающей панели.
«Menu Background Colour» – задает фон основного меню.

«Menu Link Border Colour» – задет цвет границ между ссылками.

«Current Page Link Background Colour» – задает цвет фона для той страницы меню, которая сейчас открыта, т.е. подсвечивает выбранную страницу.

«Menu Background Hover Colour» – позволяет менять цвет пунктов меню при наведении на них курсора.

«Title Background Colour» – позволяет нам задать цвет фона заголовков.

«Current Page Link Background Hover Colour» – позволяет нам изменять цвет при наведении, для выбранных страниц.
16.В разделе «Text Colour» можно задавать цвет шрифта для разных элементов мобильного меню:
«Menu Title Colour» — цвет для заголовка

«Menu Link Colour» – цвет для ссылок меню

«Current Page Link Colour» – цвет для ссылок текущего подсвеченного меню

«Menu Title Hover Colour» – цвет заголовка при наведении

«Menu Link Hover Colour» — цвет ссылки при наведении

«Current Page Link Hover Colour» — цвет подсвечиваемой страницы, при наведении на нее курсором мыши.

Здесь вам нужно будет поэкспериментировать и подобрать те цвета, которые будут лучше всего подходить для вашего сайта.
17.В разделе «Style Settings» вы можете выбрать:
«Font» – тип шрифта

«Font Size» — размер шрифта

«Title Font Size» — размер шифта для заголовка

«Click Button Font Size» — размер шрифта для кнопки открытия мобильного меню.

«Text Alignment» – выравнивание текста

«Links Height» – высота строки (позволяет регулировать межстрочный интервал)
18.Дальше в пунктах «Minimum Width» и «Maximum Width» мы можем задать минимальную и максимальную ширину.
19.В разделе «Animation Settings» задаются следующие параметры:
«Slide Animation» — стиль анимации

«Animation Speed» — скорость анимации

«Transition Speed» — скорость, с которой будет выезжать панелька мобильного меню

«Accordion Animation For Sub-Menus» даёт возможность задать анимацию акардион для разделов подменю, т.е. если у вас на сайте реализовано многоуровневое меню, то поставив здесь галочку, у вас пункты дополнительного меню будут выезжать из под основного пункта.

«Push button with Animation» — добавляет анимацию нажатия кнопки.
20.В разделе «Additional HTML Content Settings», при помощи HTML-кода, вы можете добавить в меню какую-то надпись, текст, либо другой контент. Здесь же, вы можете выбрать расположение этого контента: перед ссылками меню (Above Menu Links), либо после (Below Menu Links).

После того как мы задали все настройки, нажимаем на кнопку «Update Responsive Menu Options».

Настройки вкладки «Advanced Setting»

1.На этой вкладке, прежде всего, нужно будет задать параметр «Menu Breakpoint». Он отвечает за то разрешение экрана, начиная с которого, будет показываться мобильное меню на вашем сайте WordPress. Сейчас оно задано 800px, но вы можете задать сове значение.
2.Так же, можно сделать, что бы при показе кнопки адаптивного меню у вас происходило скрытие основного меню сайта. Для этого нужно узнать класс или идентификатор основного меню и вставить в поле «CSS of Menu To Hide».
3.«Menu Depth» позволяет задать уровень вложенности меню, то есть, к примеру, если у вас основное меню на сайте содержит пять уровней вложенности, а вы хотите чтобы в мобильном меню отображалось только два или один, то в раскрывающемся списке, вам нужно выбрать нужное значение.
4.«Menu Width» — позволяет задать ширину вашего раскрывающегося мобильного меню в процентах.
5.По умолчанию в это меню добавляется строка поиска. Для того, что бы его убрать нужно поставить галочку возле параметра «Remove Search Box». Так же, можно изменить позицию поиска: над ссылками меню, либо под ссылками.
6.При помощи параметра «Auto Expand Sub-Menus» можно расширять вложенные подпункты до размеров основного меню.
7.«Click to Close Menu on Page Click» позволит меню автоматически сворачиваться при щелчке на пустом месте на странице.
8.«Ignore Parent Clicks» — позволяет игнорировать щелчки по родительским элементам многоуровневого меню. То есть при щелчке по ним будет раскрываться подменю, а переход на родительскую страницу осуществляться не будет.
9.«Technical Settings» — здесь задается различная техническая информация по подключению скриптов, добавлению СSS-правил, и так далее. Если в этом всём не особо разбираетесь, то оставляйте всё по умолчанию.
10.«Custom Walker» тоже оставляем по умолчанию пустым.

Нажимаем на кнопку «Update Responsive Menu Options» и переходим на сайт, что бы посмотреть, что у нас получилось.

Тестирование и дополнительная настройка мобильно меню WordPress

Обновляем страницу и уменьшаем размер экрана. На ширине 800 px у меня на сайте появляется мобильное меню.

Теперь, когда на вашем сайте WprdPress есть настроенное адаптивное мобильное меню, можно убрать то, которое встроено в тему. Для этого нужно вычислить и скопировать класс или идентификатор этого меню, это делается легко, при помощи инспектирования кода.

Затем возвращаюсь в настройки плагина и на вкладке «Advanced Setting» в поле «CSS of Menu To Hide» вписываем название класса.

Если вы вставляете CSS класс, то перед названием нужно поставить точку, а если идентификатор, то перед названием ставим решетку. После этого нажимаем на кнопку «Update Responsive Menu Options».

Видео инструкция по созданию адаптивного меню

Для большей наглядности я подготовила для вас видео инструкцию в которой показан весь процесс настройки плагина Responsive Menu

Как видите, при помощи плагина Responsive Menu можно достаточно быстро создать удобное и красивое адаптивное мобильное меню для сайта WordPress, а так же настроить его дизайн.

В нем можно редактировать практически все, начиная от цветов и заканчивая шириной, и местоположением элементов. Для этого вам не нужно лезть в код и задавать какие то CSS-свойства вручную.

Лично мне данный плагин очень понравился. Он достаточно легкий и не перегружает сайт и его, вполне, можно использовать для создания мобильных адаптивных меню на сайтах WordPress.

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

Пишите комментарии, подписывайтесь на рассылку и мой канал YouTube.

Спасибо что дочитали статью до конца! До скорой встречи!

С уважением Юлия Гусарь

impuls-web.ru