Скрипт меню для мобільних пристроїв. Різне звичайне та мобільне меню в WordPress, функція wp_is_mobile, плагін WP Responsive Menu

Працювати з вкладеними елементами непросто, тому що, скажімо, при переміщенні батьківського елемента разом з ним переміщуються всі дочірні. Тому ми застосуємо кілька прийомів, які підтримуватимуть потрібні 3D-трансляції підменю та їх дочірніх елементів. Основна думка полягає у збільшенні значення для трансляції для того, щоб гарантувати, що підрівні не будуть показуватися, коли ми всі трохи зрушимо для демонстрації країв батьківських елементів. Звичайно, це не є необхідним у тому випадку, коли підменю закриває батьківський елемент.

Будь ласка, зверніть увагу, що ми використовуємо CSS властивості (transform, transition), які працюють тільки в сучасних браузерах. Приклад альтернативного варіанта для підтримуючих браузерів ви знайдете в кінці файлу component.css, де просто показано меню першого рівня. Те саме ми робимо у разі відсутності JS.

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

Усі категорії

Пристрої Пристрої
- Мобільні телефони Мобільні телефони

Тут кожен рівень обернуть тегом div із класом mp-level. Ми не зможемо застосувати до меню такого роду фіксоване позиціонування, оскільки перетворення змусять його вести себе як елемент з абсолютним позиціонуванням, тому нам доведеться використовувати абсолютне позиціонування, яке призведе до проблеми небажаної поведінки сайту (прокручування меню та залежності від висоти документа).

Щоб уникнути прокручування меню та його відсікання, якщо вміст сайту виявиться занадто коротким, ми застосуємо невелику хитрість, взявши таку структуру сторінки:

Тепер призначаємо елементам наступні стилі CSS:

Html, body, .container, .scroller ( height: 100%; ) .scroller ( overflow-y: scroll; ) .scroller, .scroller-inner (position: relative; ) background: #34495e; )

Це дозволить прокручувати контент при закритому меню мобільної версії сайту, а воно стане рівним висоті вікна браузера. Тим самим ми імітуємо те, чого досягли б фіксованим позиціонуванням. Сам плагін можна викликати так:

New mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"));

Або, якщо підменю мають закривати попередні рівні:

New mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"), (type: "cover"));

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
- Наші address
Contact

Стилі меню 1. Плагін якщо зустрічає вкладений список, то всередину батьківського li тега додає посилання, до якого вже є всередині цього li. При натисканні на додане посилання відкривається підменю. Щоб зробити елемент меню посиланням на підменю повністю, а не двома посиланнями, потрібно використовувати тег span.

Home
About us
- History
- The team
- Наші 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(); )); )); 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

Пропоную на розгляд, техніку створення простого, дуже гнучкого в налаштуваннях, і до того ж досить ефективного, адаптивного меню з використанням чистої семантичної розмітки для реалізації адаптивної конструкції без підключення JavaScript. В результаті за допомогою CSS ми отримаємо меню, яке може бути вирівняне вліво, вправо або розташовуватися точно по центру, активні/поточні пункти, що виділяються, меню здатне при зміні розміру вікна браузера, швидко перебудовуватися в вертикальну навігаційну панель, яка чудово виглядає на екранах різних мобільних пристроїв (планшети, смартфони, ноутбуки та мобільні телефони).

Приклад переглянули та переконалися у працездатності нашого меню. Такий спосіб, в цілому, дуже корисний, коли в меню використовується велика кількість посилань. В легко зможете згрупувати всі кнопки в одну, що розкривається при наведенні, привабливу панель.

HTML Розмітка

Насамперед нам необхідно виконати розмітку всієї основної конструкції нашого меню. Ми створюємо елемент навігації, а значить логічним і навіть практичним, буде застосування HTML5-елемента, тега з присвоєним йому однойменним класом, для подальшого форматування CSS стилів, а також створення та абсолютного позиціонування навігаційної панелі, що випадає. Клас current вказує на активне/поточне посилання меню, зовнішній вигляд якого сформуємо за допомогою css.

Головна
Про нас
Портфоліо
Наші послуги
Контакти

Як бачимо, меню це простий невпорядкований список з певною кількістю посилань. Кількість пунктів може бути різною, але все ж таки не варто городити город, все в розумних межах.
Далі, поки не пішли далеко, хочу нагадати, а тим хто не знає, пояснити, що HTML5 і запити media query не підтримується IE версії старше 9-ї (зовсім не дивно). Щоб уникнути головного болю в майбутньому і зробити все правильно, існують спеціальні скрипти і за допомогою якого ми зможемо вирішити задачу сумісності, передбачливо підключивши їх до документа в розділі .

Всі. З основною розміткою ми розібралися, класи прописані, милиці додані. Тепер перейдемо до визначення стилів пунктів меню, сформуємо зовнішній вигляд і робимо наше меню по-справжньому адаптивним.

CSS Визначаємо стилі

Набір стилів CSS меню під екрани моніторів настільних комп'ютерів, досить стандартний, вдаватися до подробиць не бачу сенсу. Хочу лише звернути увагу, що я вказав display:inline-block замість float:left елемента

у контейнері навігації nav. Це дозволить вирівнювати пункти меню вліво, вправо та точно по центру, вказавши властивість text-align елементу списку

/* меню */ .nav ( margin : 20px 0 ; ) .nav ul ( margin : 0 ; padding : 0 ; ) .nav li ( margin : 0 5px 10px 0 ; padding : 0 ; inline-block ;* display : inline ; /* ie7 */ ) .nav a ( padding : 3px 12px ; : #000 ; ) .nav .current a ( background : #999 ; color : #fff ; border-radius : 3px ; )

/* меню */ .nav ( margin: 20px 0; ) .nav ul ( margin: 0; padding: 0; ) .nav li ( margin: 0 5px 10px 0; padding: 0; list-style: none; inline-block; *display:inline; /* ie7 */ ) .nav a ( padding: 3px 12px; : #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 ; )

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

Починається найцікавіше. Наше меню на цьому етапі має гумовий формат (ширина визначається у відсотках) і поки що зовсім не адаптивне. Почніть змінювати розмір екрану і ви побачите, що меню вишиковується в хаотичне нагромадження кнопок.

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

@media screen and (max-width: 600px) (.nav (position: relative; min-height: 40px;)).nav ul (width: 180px; padding: 5px 0; position: absolute; top 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 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 ; / .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;) /* адаптивне меню праворуч */. 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; / .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 раціонально розмістити пункти меню і забезпечити швидку навігацію.

Проблема.

На скріншотах нижче показані поширені проблеми під час побудови меню. Якщо пунктів у меню лише чотири, то вони будуть розташовані на одному рівні, але якщо кнопок п'ять чи шість, то меню вийде в кілька ліній, що досить не практично.

http://bitfoundry.ca/

Рішення. 1) Меню, що випадає.

Це одне з найпоширеніших рішень. Але тут є і своє підводне каміння. До елементів такого меню не можна застосувати стилі у таблиці CSS. Але стилізувати меню можна за допомогою плагіна Chosen, інакше стиль списку, що випадає, залишиться за замовчуванням. До того ж, список, що випадає, виглядає досить непрофесійно. Хоча, якщо вас влаштовує такий варіант, ви зможете навчитися, як за допомогою CSS-прийомів реалізувати таке меню на своєму сайті.

http://www.smashingmagazine.com/
http://informationarchitects.net/

2) Блоки

Інший швидкий вихід із положення, встановити кожен окремий пункт меню у вигляді блоків, які розташовані вертикально. Але цей спосіб забирає місце у заголовка. Якщо в меню багато пунктів, цей варіант вам точно не підійде. Навряд чи читачам сподобається прокручувати довгий список пунктів, поки вони не знайдуть потрібний для себе вміст сайту.

http://forefathersgroup.com/

http://loveandluxesf.com/

http://www.londonandpartners.com/

3) Значок меню.

Це останнє рішення полягає в тому, що для перемикання навігації використовується іконка/кнопка. Воно найбільше оптимальне для користувачів сайту. Також цей метод хороший тим, що він зберігає простір (що дуже важливо для мобільних телефонів), а також дає повну свободу для моделювання в CSS. До того ж символ меню може бути розроблений, щоб відповідати спільному задуму тематики сайту.

http://www.sony.com

http://twitter.github.com/bootstrap/

http://zync.ca/

http://www.paulrobertlloyd.com/

Мобільне меню з jQuery ()

Це навчання покаже вам, як створити меню навігації для мобільного сайту, описане вище, за допомогою jQuery. jQuery буде використовуватися для додавання символів меню та перемикача навігації. Цей прийом не потребує додаткових HTML-тегів.

Нижче наведено найпростіший HTML-код для меню, використаний у цьому навчанні:

Button
Button

< nav id = "nav-wrap" >

< ul id = "nav" >

< li > < a href = "#" >Button< / a > < / li >

< / ul >

< / nav >

Код jQuery

Вкладіть копію jQuery та функцію дану нижче між тегами< head >. Функція додасть тег< div id = "menu-icon" в тег < nav id = "#nav-wrap" >. І коли відбуватиметься клік по елементу/іконці «МЕНЮ», меню відкриватиметься додатковим елементом.

jQuery(document).ready(function($)( /* prepend menu icon */ $("#nav-wrap").prepend("Menu"); /* toggle nav */ $("#menu-icon" ).on("click", function()( $("#nav").slideToggle(); $(this).toggleClass("active"); )); ));

jQuery (document). ready (function ($ ) (

/* prepend menu icon */

$ ("#nav-wrap"). prepend ("Menu");

/* toggle nav */

$ ("#menu-icon"). on ("click" , function () (

$ ("#nav"). slideToggle();

$ (this). toggleClass ("active");

} ) ;

HTML-код буде виглядати так, як показано нижче (для цього потрібно натиснути «Подивитися Елемент» або подивитися згенерований код)

Button
Button

< nav id = "nav-wrap" >

< div id = "menu-icon" >Menu< / div >

< ul id = "nav" >

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

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