/ Дизайн / Мобильное меню типа mmenu

Мобильное меню типа mmenu

HIT

21.02.2016

2544

Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню.

Функционал mmenu.js

Подключаем стили и скрипты:

<link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://opttour.ru/wp-content/themes/tester/scripts/jquery.mmenu.min.js"></script>

Инициализируем скрипт, и применяем его к меню

<script type="text/javascript">
$(function() {
$('nav').mmenu();
});
</script>

Пункты только в мобильном меню

Если мы хотим чтобы некоторые пункты появлялись только в мобильном меню, добавляем к ним класс mobile который изначально делает их display: none и с помощью медиазапросов будет их отображать. Можно сделать и наоборот, аналогичным образом, добавив к некоторым пунктам, которые не должны отображаться в мобильной версии, класс desktop.

[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
wp_nav_menu

wp_nav_menu

Данная функция wordpress отвечает за вывод меню. Рассмотрим параметры этой функции. Вывод без дополнительных параметров: В этом случае классы меню и контейнера будут взяты из названия меню Все аргументы функции: Читать далее »

Меню для мобильной версии

Меню для мобильной версии

Делаем простую адаптацию меню под мобильную версию, превращая в иконку, при нажатии на которую меню раскрывается. Трансформируем меню в иконку Стандартный код вывода меню <nav id="topmenu" role="navigation"> <?php wp_nav_menu( array( Читать далее »

/
Отделяем планшет от телефона

Отделяем планшет от телефона

Как известно функция wordpress wp_is_mobile() определяет мобильные устройства без разбора: телефон или планшет данная функция не распознает. Более точную идентификацию устройства можно делать с помощью плагина WP Mobile Detect. С Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Мобильное меню типа mmenu
Плагины для woocommerce (нюансы)
Рекомендации для васПлагины для woocommerce (нюансы)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.