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

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

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

Автор советует использовать 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.

Стили меню

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

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

Javascript

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

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

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

Проблемы

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

Читайте также:  Как подключить 8800 к компьютеру

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

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

Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.

Как известно у iPhone событие click срабатывает только у элементов, у которых есть cursor:pointer . Поэтому для закрытия меню по клику в не его области, к добавляется класс body_pointer .

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

Существует множество способов сделать адаптивное меню с помощью jQuery плагинов. Но мы пойдем по другому пути и будем использовать CSS3 media queries и код на jQuery. Давайте начнем.

Мобильное меню для сайта 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.

Ссылка на основную публикацию
Мегафон опции за рубежом
Всем абонентам мобильной связи известно, что оплата услуг в роуминге достаточно высокая. Кроме того, нужно платить за входящие звонки. И...
Люстра с пультом управления светодиодная инструкция
Идея установить и подключить люстру с пультом замечательна тем, что хозяева квартиры получают возможность управлять освещением, не привязываясь к выключателю....
Ля рош позе скидки
12 актуальных предложений март 2020 Сэкономьте 10% с промокодом при покупке более 3000 рублей Приобретите в интернет-магазине La Roche Posay...
Мегафон отправить деньги с телефона на телефон
Каждый клиент компании Мегафон при необходимости может со своего счёта пополнить баланс близкого, который также пользуется услугами данного оператора. Для...
Adblock detector