/* меню */ .nav { margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; *display:inline; /* ie7 */ } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 3px; }

За изменения цвета ссылок и фона активных/текущих пунктов меню отвечают секции.nav a:hover и.nav .current a соответственно. Я не стал особо мудрить в этом примере, всё сделал в духе минимализма, при наведении на ссылку меняется цвет, текст становится черным color: #000; , а для активных пунктов добавил фон background: #999; , заменил цвет шрифта на белый color: #fff; и чуточку закруглил края border-radius: 3px; у получившейся кнопки. Вы же можете фантазировать и экспериментировать в этом плане, сколь душе угодно.

Как я уже упоминал выше, мы можем изменять выравнивание пунктов навигации с помощью свойства text-align , для этого добавим в код CSS несколько строк:

/* меню справа */ .nav.right ul { text-align: right; } /* меню по центру */ .nav.center ul { text-align: center; }

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

Будем исправлять ситуацию с помощью медиа запросов. В точке приложения медиа запроса в 600px, выставил относительное позиционирование position: relative; для элемента nav , чтобы мы смогли потом разместить список меню

сверху в абсолютной позиции position: absolute; . С помощью свойства display: none скроем все пункты меню li , оставив только активные на текущий момент ссылки с классом current , прописав им свойство display: block
При наведении на сгруппированную панель навигации все пункты меню должны показываться в виде выпадающего списка, для этого определяем правило.nav ul:hover li с функцией code>display: block . Для активных/текущих пунктов добавляем иконку, чтобы выделить из из остальных.
Если необходимо сместить меню вправо или расположить по центру, воспользуйтесь left и right свойствами позиционирования для списка ul нашего меню.


@media screen and (max-width : 600px ) { .nav { position : relative ; min-height : 40px ; } .nav ul { width : 180px ; padding : 5px 0 ; position : absolute ; top : 0 ; left : 0 ; border : solid 1px #aaa ; background : #FAFAFA url (images/icon-menu.png ) no-repeat 10px 11px ; border-radius : 5px ; box-shadow : 0 1px 2px rgba (0 , 0 , 0 , .3) ; } .nav li { display : none ; /* скрыть все пункты */ margin : 0 ; } .nav .current { display : block ; /* показывать только текущие активные пункты */ } .nav a { display : block ; padding : 5px 5px 5px 32px ; text-align : left ; } .nav .current a { background : none ; color : #666 ; } /* при наведении на пункты меню */ .nav ul: hover { background-image : none ; } .nav ul: hover li { display : block ; margin : 0 0 5px ; } .nav ul: hover .current { background : url (images/icon-check.png ) no-repeat 10px 7px ; } /* адаптивное меню справа */ .nav .right ul { left : auto ; right : 0 ; } /* адаптивное меню по центру */ .nav .center ul { left : 50% ; margin-left : -90px ; } }

@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* скрыть все

• пункты */ margin: 0; } .nav .current { display: block; /* показывать только текущие активные
• пункты */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* при наведении на пункты меню */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* адаптивное меню справа */ .nav.right ul { left: auto; right: 0; } /* адаптивное меню по центру */ .nav.center ul { left: 50%; margin-left: -90px; } }

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

  Урок подготовлен по материалам
  Вольный перевод и адаптация: Андрей /driver/

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

  Задача

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

  

  Решение

  Одним из распространенных способов является конвертация навигации в выпадающий список на основе элемента select . Такое решение имеет недостаток - элемент select нельзя стилизовать с помощью CSS. Плагины Javascript, наподобие Chosen позволяют модифицировать меню, или придется довольствоваться системными стилями для выпадающего списка. Также пользователь может быть введен в заблуждение, когда широкоэкранная версия структуры меню трансформируется на мобильном устройстве в выпадающий список.

  

  

  2) Вывод в виде блока

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

  

  

  

  3) Иконка меню

  И последний способ, который мы рассмотрим в нашем уроке - использование иконки меню для включения навигации. Такой подход сохраняет место на странице (что важно для мобильного устройства) и дает полный контроль над внешним видом с помощью CSS. Иконка меню и сама навигация может быть представлена в соответствии с общим стилем сайта.

  

  

  

  

  Навигация для мобильного включаемая с помощью jQuery

  В данном уроке мы покажем, как создать навигацию для маленького экрана. Будет использоваться jQuery для подготовки иконки меню и включения навигации. Никаких дополнительных тегов HTML для работы навигации не требуется.

  Для нашего меню будет использоваться простая структура:

  • Кнопка
  • Кнопка

  Для функционирования меню требуется код JavaScript. Функция подготавливает элемент в теге . Когда посетитель нажимает кнопку мыши на элементе #menu-icon , выскальзывает навигация.

  jQuery(document).ready(function($){ /* Подготавливаем иконку меню */ $("#nav-wrap").prepend("Меню"); /* Включаем навигацию */ $("#menu-icon").on("click", function(){ $("#nav").slideToggle(); $(this).toggleClass("active"); }); });

  В результате работы скрипта изменится структура документа:

  Меню

  • Кнопка
  • Кнопка

  Для нашей демонстрации используется достаточно простой код CSS. Ключевой момент представлен на рисунке ниже. Элемент #menu-icon имеет изначально свойство display:none . Используется медиа-запрос для изменения #menu-icon на display:block , если ширина окна просмотра меньше 600px.

  

  В результате получится навигация с представленным функционалом:

  

  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% мобильного реагирования.

  

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

  

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

  

  Установить плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

  

  

  

  Разберём настройки:

  General Options .

  – Enable Mobile Menu, можно включить или отключить мобильное меню.

  – Enable Left Header Menu, включить или отключить левое меню.

  – Enable Right Header Menu, включить или отключить правое меню.

  – Width Trigger, укажите при каком максимальном размере будет отображаться мобильное меню.

  – Hide Elements, скрыть какой-либо элемент с сайта при отображении мобильного меню. Можно указать CSS класс или ID элемента.

  – Custom CSS, можно указать свои CSS стили для меню.

  – Save Changes, сохраните изменения.

  Header Options .

  – Site Logo, можно выбрать что будет отображаться на мобильном сайте. Логотип или Текст.

  – Logo, нажмите по полю, чтобы загрузить логотип.

  – Alternative Logo URL, можно указать альтернативный URL-адрес логотипа.

  – Header Height, можно указать высоту меню.

  – Logo Top Margin, размер отступа, от верха сайта до логотипа.

  – Header Text, можно указать текст, который будет отображаться в заголовке, если вы в начале выбрали отображение текста.

  – Header Text Font Size, можно выбрать размер текста заголовка.

  – Сохраните изменения .

  Left Menu Options .

  – Left Menu, выберите меню сайта для левого меню.

  – Menu Icon, можно выбрать для меню иконку или изображение.

  – Menu Icon Image, нажмите по полю, чтобы загрузить иконку или изображение.

  – Left Menu Panel Width, можете указать размер ширины панели левого меню.

  – Icon Top Margin, верхний отступ от иконки.

  – Icon Left Margin, отступ с левой стороны до иконки.

  – Сохраните изменения .

  Right Menu Options . Здесь такие же настройки как и для левого меню. Здесь настройки для правого меню.

  Color Options .

  – Header Background Color, можно выбрать цвет для заголовка меню.

  – Header Text Color, можно выбрать цвет для текста заголовка меню.

  Выбор цвета для левого и правого меню (одинаковые настройки).

  – Left Menu Icon Color, цвет иконки.

  – Background Color, цвет фона меню.

  – Text Color, цвет текста в меню.

  – Background Hover Color, цвет фона при наведении.

  new player 16 января 2017 в 01:28 Мобильное меню для сайта. Плагин JQuery mmenu
  • jQuery

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

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

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

  Создаём меню Меню создаётся очень просто - как неупорядоченный html-список, плагин поддерживает вложенность списков. Всё это должно быть обёрнуто в тег nav, у которого задан id.
  • Home
  • About us
    • History
    • The team
    • Our address
  • Contact
  Стили меню 1. Плагин если встречает вложенный список, то внутрь родительского li тега добавляет ссылку, к той которая уже есть внутри этого li. При нажатии на добавленную ссылку открывается подменю. Чтобы сделать элемент меню ссылкой на подменю полностью, а не двумя ссылками, нужно использовать тег span.
  • Home
  • About us
    • History
    • The team
    • Our address
  • Contact
  
  2. Чтобы сделать подменю всегда видимым, нужно добавить к нему класс «Inset».
  3. Добавьте класс «Selected» к элементу меню, чтобы сделать его выделенным.
  4. Можно создавать разделители следующим образом
  • Website
  • Home
  • About us
  • Contact
  Javascript Вам понадобится кнопка, нажатие на которую бы открывало меню. Я советую использовать вот эти гамбургеры . Там можно прочитать как использовать их. Если коротко, то вам нужно будет скачать стили гамбургера, подключить их на страницу, и добавить приблизительно такой html-код

  
  Класс 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"ы.

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

  Теги: адаптивный дизайн, вёрстка, jquery plugins