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

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

21.02.2016

930

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

Функционал 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.

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Фиксированное меню 2.0

Фиксированное меню 2.0

Продолжая работать над совершенствованием фиксированного меню, нашел следующее решение. Верстка фиксируемого блока <div id="stick_menu" class="default"> В отличие от предыдущей версии меню, перед блоком ставить ничего не нужно. Стили для фиксированного Читать далее »

Автоматическое меню, оглавление, измененное состояние меню

Автоматическое меню, оглавление, измененное состояние меню

Меню с изменяемым состоянием может применяться для различных задач, в т.ч. для меню лэндинга или для оглавления длинной страницы. Такое меню состоит из хэш-ссылок для перемещения по самой странице. Смысл Читать далее »

Мобильная версия сайта

Мобильная версия сайта


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

По современным меркам, мобильная вевия сайта — это стандарт. Есть несколько способов создать адаптивность сайта для различных устройств и размеров экрана. Медиазапросы CSS @media (max-width: 1440px) { .with-right-sidebar {width: 21%;} Читать далее »

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

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

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