Пропустить

Как создать адаптивное меню для мобильного WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Хотели бы вы создать адаптивное мобильное меню в своем блоге на WordPress?

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

В этом уроке мы покажем вам, как легко создать адаптивное меню на WordPress.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

Как создать адаптивное мобильное меню на wordpress

Здесь речь пойдет о более подробном рассмотрении метода с плагином для начинающих и метода кодирования для опытных пользователей.

Первый способ: создать мобильное меню с плагином WordPress

Этот метод проще и рекомендуется для начинающих, потому что он не требует специальных навыков кодирования.

В этом методе мы создадим меню (со значком гамбургера), который скользит по экрану мобильного телефона.

Плагин адаптивного меню WordPress

Первое, что вам нужно сделать, это установить и активировать Плагин WordPress Responsive Menu , Для получения более подробной информации, ознакомьтесь с нашим руководством по установке плагина WordPress .

После активации плагина плагин добавит в меню новый пункт под названием « Отзывчивый Меню ". Нажав на нее, вы попадете на страницу настроек плагина WordPress.

Плагин меню адаптивной панели управления WordPress

Сначала необходимо указать размер, с которого должно появляться мобильное меню. По умолчанию 800 пикселей, что должно работать для большинства веб-сайтов.

После этого вам нужно выбрать меню, которое вы хотите использовать на мобильном телефоне.

Последняя опция на экране позволяет вам предоставить CSS-класс для вашего меню. Это позволит плагину скрыть ваше не реагирующее меню на маленьких экранах.

Не забудьте нажать на « параметры обновления Чтобы сохранить ваши настройки.

Мы также предлагаем вам ознакомиться с нашими 10 WordPress плагины для создания меню в вашем блоге

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Теперь вы можете посетить свой веб-сайт и изменить размер экрана браузера, чтобы увидеть адаптивное меню в действии.

Сайт в действии меню реагирующих на мобильный

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

Метод 2: Как добавить мобильное меню вручную

Одним из наиболее распространенных методов отображения меню на мобильных экранах является использование кредитного плеча.

Этот метод требует, чтобы вы добавили пользовательский код в ваши файлы WordPress.

В одном из наших предыдущих уроков мы покажем вам как создать плагин WordPress.

Сначала вам нужно открыть текстовый редактор, например Блокнот, и вставить этот код.

(function () {nav var = document.getElementById ('site-navigation'), кнопка, меню; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Скрыть кнопку, если меню отсутствует или пусто, если (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Теперь вы должны сохранить этот файл с именем " navigation.js На вашем столе.

Затем вам нужно открыть FTP-клиент для загрузки этого файла в папку "/ wp-content / themes / your-theme / js /" на вашем веб-сайте WordPress.

Заменить выражение " ваш-тема С именем вашей текущей папки темы WordPress. Если в каталоге вашей темы нет папки js, вам необходимо ее создать.

После загрузки файла JavaScript следующий шаг - убедиться, что ваш веб-сайт WordPress загрузит файлы JavaScript. Вам нужно будет добавить следующий код в " functions.php Вашей темы WordPress.

Откройте для себя что-нибудь еще Что вы можете сделать с файлом functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '' /js/navigation.js, массив (»JQuery '), 20160909', верно.);

Теперь нам нужно добавить навигационное меню в нашу тему WordPress. Обычно меню навигации добавляется в файл header.php Вашей темы WordPress.

Меню 'primary', 'menu_class' => 'nav-menu')); ?>

Мы предполагаем, что расположение меню, определенное вашей темой WordPress, называется " первичный ". В противном случае используйте местоположение, определенное вашей темой WordPress.

Откройте для себя также наш 5 плагинов WordPress для создания форм подписки

Последний шаг - добавить немного CSS, чтобы в нашем меню использовались правильные классы CSS для переключения при просмотре на мобильных устройствах.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

/ * Меню навигации * / .main-navigation {margin-top: 24px; верхняя маржа: 1.714285714rem; выравнивание текста: центр; }. основная навигация li {маржа-верх: 24px; верхняя маржа: 1.714285714rem; размер шрифта: 12 пикселей; font-size: 0.857142857rem; высота строки: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; }. основная навигация ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS для использования на мобильных устройствах @media screen и (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # эдедед; граница сверху: сплошной 1px #ededed; дисплей: встроенный блок! важно; выравнивание текста: слева; ширина: 100%; } .main-navigation ul {маржа: 0; текстовый отступ: 0; } .main-navigation li a, .main-navigation li {display: inline-block; текстовое оформление: нет; } .main-navigation li a {border-bottom: 0; цвет: # 6a6a6a; line-height: 3.692307692; преобразование текста: прописные буквы; белое пространство: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; } .main-navigation li {маржа: 0 40px 0 0; маржа: 0 2.857142857rem 0 0; положение: относительное; } .main-navigation li ul {маржа: 0; отступ: 0; позиция: абсолютная; верх: 100%; z-индекс: 1; высота: 1 пикс; ширина: 1 пикс; переполнение: скрыто; клип: rect (1px, 1px, 1px, 1px); }. главная навигация li ul ul {верх: 0; осталось: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; клип: наследование; переполнение: наследование; рост: наследовать; ширина: наследовать; }. main-navigation li ul li a {background: #efefef; нижняя граница: сплошной 1px #ededed; дисплей: блок; размер шрифта: 11 пикселей; font-size: 0.785714286rem; line-height: 2.181818182; отступ: 8 пикселей 10 пикселей; заполнение: 0.571428571рем 0.714285714рем; ширина: 180 пикселей; ширина: 12.85714286rem; белое пространство: нормально; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {background: # e3e3e3; цвет: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; font-weight: жирный; } .menu-toggle {дисплей: нет; }}

Теперь вы можете посетить свой веб-сайт и изменить размер экрана браузера, чтобы увидеть, переключается ли ваше адаптивное меню.

Качалка-меню WordPress-учебник

Откройте для себя также несколько премиальных плагинов WordPress  

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. UberMenu

UberMenu - это плагин WordPress, предназначенный для создания настраиваемого, адаптивного и доступного для пользователей мегамену. Он работает после установки и не требует специальной настройки.

Плагин мегаменю ubermenu для wordpress

Это простой в использовании плагин, но при этом достаточно мощный, чтобы создавать настраиваемые и креативные макеты мегаменю.

Смотрите также наш 9 плагинов WordPress для создания ценовых сеток в блоге

Среди прочего вы найдете: 3 шаблона меню, полностью адаптивный макет, совместимость с мобильными устройствами (iPhone, iPad, Android), поддержку сенсорного ввода и т. Д.

скачать | Демонстрация | веб-хостинг

2. LMM

Liquida Mega Menu, также называемый LMM, - это плагин WordPress, разработанный для пользователей и разработчиков. Он имеет простой и интуитивно понятный интерфейс, интегрированный с приборной панелью WP, что позволяет создавать и настраивать неограниченное количество мегаменю без каких-либо навыков программирования.

Lmm WordPress адаптивное мега-меню на основе bootstrap

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

скачать | Демонстрация | веб-хостинг

3. Меню 8Degree Fly

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

8degree fly menu реагирует на плагин меню меню для WordPress

Вы сможете добавить дополнительные элементы к элементам меню по умолчанию, такие как значки, слоганы меню, заголовок псевдогруппы и длинное описание.

Читайте также: 10 плагинов WordPress для оптимизации боковых панелей и липких заголовков

Он также поставляется с редактором WYSIWYG, который поможет вам понять ваше длинное описание в удобной для пользователя форме .В этом редакторе вы также можете использовать шорткоды.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

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

Заключение

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

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

А пока расскажите о своем Комментарии и предложения в специальном разделе.

...

Эта статья содержит комментарии 2

  1. Bonjour

    благодарю вас за информацию

    Кажется, я не могу найти «класс CSS для вашего меню». Я нашел таблицу стилей css, но не знаю, что копировать и вставлять

    Заранее спасибо за вашу помощь

    хорошие выходные

    Мишель

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
5 акции
доля4
чирикать
Регистрация1