Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Создание темы WordPress TwentyFourteen более сексуальной с мобильным аккордеонным меню

  1. вступление
  2. Эта проблема
  3. Решение
  4. кратчайший путь
  5. HTML
  6. PHP
  7. Javascript
  8. Резюме

вступление

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

Сегодня мы рассмотрим «Главное главное меню» в Двадцать четырнадцать тем для WordPress, который является фиксированным, сверху вниз меню.

Эта проблема

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

Решение

Одним из решений, которое мы собираемся изучить здесь, является создание меню аккордеон стиль на мобильном телефоне.

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

Если подменю развернуто, то последующий щелчок по активному родительскому элементу приведет к переходу на эту страницу.

кратчайший путь

Я настоятельно рекомендую вам прочитать всю статью и понять, что происходит, но если вы просто хотите, чтобы код был включен GitHub ,

HTML

Поскольку мы работаем с существующей темой, код HTML предопределен. Ниже приведен HTML-код меню на демонстрационном сайте:

<nav class = "site-navigation primary-navigation" id = "primary-navigation" role = "navigation"> <h1 class = "menu-toggle"> Основное меню </ h1> <a class = "screen-reader- text skip-link "href =" # content "> Перейти к содержанию </a> <div class =" menu-main-menu-container "> <ul class =" nav-menu "id =" menu-main-menu "> <li class =" menu-item menu-item-type-custom-menu-item-object-custom текущий-menu-item current_page_item menu-item-home menu-item-278 "id =" menu-item-278 " > <a href="http://twentyfourteendemo.wordpress.com/"> Главная страница </a> </ li> <li class = "menu-item menu-item-type-post_type menu-item-object-page menu -item-has-children menu-item-279 "id =" menu-item-279 "> <a href="http://twentyfourteendemo.wordpress.com/a-parent-page/"> Раскрывающееся меню </ a > <ul class = "sub-menu"> <li class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-280" id = "menu-item-280"> < a href = "http://twentyfourteendemo.wordpress.com/a-parent-page/first-child/"> Первый ребенок </a> </ li> <li class = "menu-item menu-item-type- type- post_type menu-item-obj ect-page menu-item-has-children menu-item-282 "id =" menu-item-282 "> <a href =" http://twentyfourteendemo.wordpress.com/a-parent-page/second-child / "> Второй ребенок </a> <ul class =" sub-menu "> <li class =" menu-item menu-item-type-post_type menu-item-object-page menu-item-283 "id =" menu-item-283 "> <a href="http://twentyfourteendemo.wordpress.com/a-parent-page/second-child/a-grandchild-page/"> Страница внука </a> </ li > <li class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-284" id = "menu-item-284"> <a href = "http: // fiftyfourteendemo. wordpress.com/a-parent-page/second-child/a-spoiled-grandchild-page/">A Испорченная страница внука </a> </ li> <li class = "пункт меню menu-item-type-type- post_type menu-item-object-page menu-item-285 "id =" menu-item-285 "> <a href =" http://twentyfourteendemo.wordpress.com/a-parent-page/second-child/another -grandchild-page / "> Другая страница внука </a> </ li> </ ul> </ li> <li class =" menu-item menu-item-type-post_type menu-item-object-page menu- item-287 "id =" menu-ite m-287 "> <a href="http://twentyfourteendemo.wordpress.com/a-parent-page/third-child/"> Третий ребенок </a> </ li> <li class =" пункт меню menu-item-type-post_type menu-item-object-page menu-item-281 "id =" menu-item-281 "> <a href =" http://twentyfourteendemo.wordpress.com/a-parent-page / четвертый ребенок / "> Четвертый ребенок </a> </ li> <li class =" menu-item menu-item-type-post_type menu-item-object-page menu-item-286 "id =" menu- item-286 "> <a href="http://twentyfourteendemo.wordpress.com/a-parent-page/second-child/another-grandchild-page/a-wee-little-baby-page/"> Wee Маленькая детская страница </a> </ li> </ ul> </ li> <li class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu- item-357 "id =" menu-item-357 "> <a href="http://twentyfourteendemo.wordpress.com/default-page-templates/"> Шаблоны страниц </a> <ul class =" sub- menu "> <li class =" menu-item menu-item-type-post_type menu-item-object-page menu-item-368 "id =" menu-item-368 "> <a href =" http: // twentyfourteendemo.wordpress.com/default-page-templates/ "> Шаблоны страниц по умолчанию </a> </ li> <li class =" menu-item menu-item-type-post_type menu-item-object-page menu-item-358 "id =" menu-item-358 " > <a href="http://twentyfourteendemo.wordpress.com/default-page-templates/contributor-page-template/"> Шаблон страницы участника </a> </ li> <li class = "menu-item menu -item-type-post_type menu-item-object-page menu-item-359 "id =" menu-item-359 "> <a href =" http://twentyfourteendemo.wordpress.com/default-page-templates/ шаблон страницы полной ширины / "> шаблон страницы полной ширины </a> </ li> </ ul> </ li> <li class =" menu-item menu-item-type-post_type menu-item-object -page menu-item-289 "id =" menu-item-289 "> <a href="http://twentyfourteendemo.wordpress.com/html-elements/"> HTML-элементы </a> </ li> < li class = "menu-item menu-item-type-post_type menu-item-object-page menu-item-290" id = "menu-item-290"> <a href = "http: //twentyfourteendemo.wordpress. ru / image-alignment-and-styles / "> Выравнивание и стили изображения </a> </ li> </ ul> </ div> </ nav>

PHP

Единственный PHP у нас будет быстрый Плагин WordPress файл, который использует wp_enqueue_script загрузить файл Javascript.

&lt;? php / ** * Имя плагина: Аккордеонное меню TwentyFourteen * Описание: Добавляет функциональность аккордеона в главное меню Top в теме TwentyFourteen на мобильном телефоне * Версия: 1.0 * Автор: Интерактивная группа Advice * URI автора: https: // www. adviceinteractivegroup.com * Лицензия: GPL2 * Copyright 2014 Advice Interactive Group (электронная почта: [email protected]) * * Эта программа является свободным программным обеспечением; Вы можете распространять его и / или изменять * в соответствии с условиями Стандартной общественной лицензии GNU, версия 2, как * опубликовано Free Software Foundation. * * Эта программа распространяется в надежде, что она будет полезна, * но БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ; даже без подразумеваемой гарантии * ТОВАРНОГО ВОЗМОЖНОСТИ или ПРИГОДНОСТИ ДЛЯ ОСОБЫХ ЦЕЛЕЙ. Смотрите * GNU General Public License для более подробной информации. * * Вы должны были получить копию Стандартной общественной лицензии GNU * вместе с этой программой; если нет, напишите в Free Software * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA * / function TwentyFourteen_Accordion_Menu_enqueue_scripts () {// ставьте в очередь тему Javascript с jQuery в качестве зависимости // http: / /codex.wordpress.org/Function_Reference/wp_enqueue_script wp_enqueue_script ('TwentyFourteen_Accordion_Menu', plugins_url ('/js/TwentyFourteen_Accordion_Menu.js', __FILE__), массив («ложь»); } // добавляем enqueue_scripts в действие wp_enqueue_scripts // http://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts add_action ('wp_enqueue_scripts', 'TwentyFourteen_Accordion_Menu_enqueue_scripts); ?>

Javascript

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

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

Когда на кого-то нажимают (или касаются), он получает класс «sub-menu-active», и подменю включается.

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

function TwentyFourteen_Accordion_Menu () {// если мы не на мобильном телефоне (значок меню скрыт), отображать вложенные элементы и поручительство if (jQuery ('# primary-navigation .menu-toggle'). is (': hidden')) {/ / показать подменю jQuery ('# menu-main-menu ul.sub-menu'). show (); вернуть; } else {// скрыть подменю jQuery ('# menu-main-menu ul.sub-menu'). hide (); } // функция щелчка по верхнему уровню jQuery ('# menu-main-menu> li> a'). click (function (e) {// сохранение родительского li в переменной var parent_li = jQuery (this) .parent ('li) '); // если подменю не существует в родительском li if (! jQuery (' ul.sub-menu ', parent_li) .first (). length) {return;} // если подменю уже активно, поручить if (parent_li.hasClass ('sub-menu-active')) {return;} // остановка ссылки click e.preventDefault (); // сохранение текущего подменю в переменной var current_submenu = jQuery ('ul.sub-menu' , parent_li) .first (); // сдвинуть вверх текущие подменю jQuery ('# menu-main-menu> li> ul.sub-menu'). not (current_submenu) .slideUp (function () {// удалить активный подменю класс из всех элементов первого уровня, кроме текущего родительского li jQuery ('# menu-main-menu> li'). not (parent_li) .removeClass ('sub-menu-active');});} / сдвинуть текущее подменю current_submenu.slideDown (function () {// добавить активное подменю к текущему родительскому элементу li parent_li.addClass ('sub-menu-active');});}); // функция щелчка навигации второго уровня jQuery ('# menu-main-menu ul.sub-menu> li> a'). click (function (e) {// сохранение родительского li в переменную var parent_li = jQuery (this). parent ('li'); // если в родительском li нет подменю if if (! jQuery ('ul.sub-menu', parent_li) .first (). length) {return;} // если подменю уже активен, залог if (parent_li.hasClass ('sub-menu-active')) {return;} // прекратить щелчок ссылки e.preventDefault (); // сохранить текущее подменю в переменной var current_submenu = jQuery ('ul. sub-menu ', parent_li) .first (); // сдвинуть вверх нетекучие подменю jQuery (' # menu-main-menu ul.sub-menu> li> ul.sub-menu '). not (current_submenu) .slideUp (function () {// удалить активный из подменю класс из всех элементов второго уровня, кроме текущего родительского li jQuery ('# menu-main-menu ul.sub-menu> li'). not (parent_li) .removeClass ('sub-menu-active');}); // скользить вниз по текущему подменю current_submenu.slideDown (function () {// добавить активное подменю в текущий родительский li parent_li.addClass ('sub-menu-active ');});}); } // загрузить аккордеон меню в готовом документе jQuery (документ) .ready (function ($) {TwentyFourteen_Accordion_Menu ();}); // загрузить аккордеон меню при изменении размера окна jQuery (window) .resize (function () {TwentyFourteen_Accordion_Menu ();});

Резюме

Наше меню теперь полностью видно над сгибом на мобильном телефоне.

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

Хотите попробовать это сами? Весь код включен GitHub , Наслаждаться.

Похожие

HTML5: что это?
Когда Стив Джобс отказался разрешить Flash на устройствах iOS Он утверждал, что HTML5 может делать все, что делает Flash. Он был не совсем честен - поле искажения реальности было сильным в тот день - но в конечном итоге Apple победила, а Adobe - нет; HTML5, а не Flash, - это технология, которая преобразует сеть. Так что же это такое и чего оно хочет от нас? Что такое HTML5? HTML5 - это последняя
7+ Аккордеонных Плагинов WordPress (Бесплатно и Платно)
Аккордеонные плагины WordPress придадут удивительный вид вашему сайту. Он предоставляет некоторые анимации для кнопок, а также вкладок на сайте. Главное, для чего он действительно используется? Аккордеон используется, чтобы скрыть HTML-контент вашего сайта. Когда вы нажимаете
Является ли YouTube Premium флопом?
... этапе, также как и соглашения о разделе доходов с партнерами по контенту. Текущая итерация оценивается в амбициозные 12 долларов в месяц - сравнимо с подпиской Netflix - и удаляет рекламу при предоставлении доступа к оригиналам YouTube. Все собирается измениться снова.
Простое Аккордеонное Меню
Основные характеристики Выберите меню из доступных Joomla! список меню Отзывчивый (планшеты, мобильные телефоны и большие рабочие столы) Выберите пользовательский пункт базового меню Выберите начальный и конечный уровень Возможность всегда отображать элементы подменю Возможность отображения изображений и значков в пунктах меню Возможность отображать субтитры под каждым заголовком меню Предопределенные макеты
В этом разделе описывается, как изменить источник обновления с Windows Server Update Services (WSUS) на Windows ...
В этом разделе описывается, как изменить источник обновления с Windows Server Update Services (WSUS) на Windows Update, чтобы можно было установить .NET Framework 3.5.1 или языковой пакет на Windows Server 2012 R2 / 2016/2019. вопросы .NET Framework сообщает, что исходный файл не найден. Когда .NET Framework 3.5.1 установлена ​​в Windows Server 2012 R2, Windows Server 2016 или Windows Server 2019, отображается сообщение об ошибке, как показано на следующем рисунке.
Как записать аудио из Skype звонки в высоком качестве на Mac
Если вы когда-либо проводили собеседования, конференц-звонки или просто какие-либо важные звонки через Skype, для которых вам позже понадобилась расшифровка, возможно, вы хотели бы записать звонок Skype. Пользователям Windows легко записывать звонки через Skype, но бесплатных решений не так много, если вы используете Mac. В этом небольшом руководстве подробно описана вся информация, необходимая для записи звонка Skype на Mac. Вы будете работать с бесплатными приложениями полностью, и не будет
Тест смартфона Motorola Moto G
введение После более чем одного года отсутствия нового смартфона на французском рынке Motorola возвращается с моделью, более привлекательной для своей цены: телефонная скидка Moto G. или настоящий самородок? Motorola объявила об этом в прошлом году: RAZR HD и другие
виртуальная машина
решение Решение для оптимизации установки продуктов «Битрикс» С помощью специальных ВМ-решений вы можете получить оптимально сконфигурирован сервер, который не уступает по производительности BitrixVM, а по масштабируемости - преобладающий виртуальную машину «Битрикс». Пакеты подготовлены специалистами «Битрикс» и доступны для скачивания и использования. 1. «Битрикс: Виртуальная машина 7.2» «Битрикс: Виртуальная машина 7.2» специально настроена для
Office Mobile теперь доступен только для Windows 10 Mobile, что больше не важно. Владельцы ПК и планш...
Office Mobile теперь доступен только для Windows 10 Mobile, что больше не важно. Владельцы ПК и планшетов с Windows не будут проигрывать, но для Microsoft пришло время сообщить нам о своих намерениях относительно будущего платформы UWP. Среда запуска универсальной платформы Windows (UWP) принесла многообещающие результаты. Вот как мы пишем приложение один раз для всех устройств, и у нас есть инструмент для простого переноса интерфейса на разные размеры

Комментарии

Что хорошего в HTML5?
Что хорошего в HTML5? HTML5 был разработан для предоставления практически всего, что вы хотели бы делать в Интернете, не требуя дополнительного программного обеспечения, такого как плагины для браузера. Он делает все, от анимации до приложений, от музыки до фильмов, а также может быть использован для создания невероятно сложных приложений, которые запускаются в вашем браузере. Есть еще кое-что. HTML5 не является частной собственностью, поэтому вам не нужно платить лицензионные
Вам нужна драматическая музыка или музыка, которая более эмбиентна?
org/Plugin_API/Action_Reference/wp_enqueue_scripts add_action ('wp_enqueue_scripts', 'TwentyFourteen_Accordion_Menu_enqueue_scripts); ?> Javascript Javascript также довольно прост. Мы обнаружим, если мы на мобильном телефоне, используя видимость переключателя меню. Если он скрыт, мы не на мобильном и ничего не делаем. Если мы на мобильном телефоне, то мы скрываем все подменю и добавляем событие щелчка к элементам навигации верхнего уровня, содержащим подменю.
Но хотелось бы мне еще несколько новых движений, чтобы iPad Pro стал еще более похожим на ПК?
Но хотелось бы мне еще несколько новых движений, чтобы iPad Pro стал еще более похожим на ПК? Да, я бы Многозадачность с каждым годом становится все лучше, но она все еще не так гибка, как хотелось бы для моего рабочего процесса. Посмотреть полную галерею Попасть в док-станцию ​​приложения означает пролистывание части вверх, а не всего - немного странно. Сара Тью / CNET Говоря о рабочем процессе, давайте поговорим о ярлыках. То, что
Эта статья полезна?
Эта статья полезна? да нет Полное руководство по настройке Windows 10 В этой электронной книге мы рассмотрим множество вариантов полной настройки Windows 10. К концу этой электронной книги вы узнаете, как сделать Windows 10 своей собственной и стать опытным пользователем Windows 10. Получи

Lt;?
Org/Plugin_API/Action_Reference/wp_enqueue_scripts add_action ('wp_enqueue_scripts', 'TwentyFourteen_Accordion_Menu_enqueue_scripts); ?
Хотите попробовать это сами?
Так что же это такое и чего оно хочет от нас?
Что такое HTML5?
Главное, для чего он действительно используется?
Или настоящий самородок?
Что хорошего в HTML5?
Org/Plugin_API/Action_Reference/wp_enqueue_scripts add_action ('wp_enqueue_scripts', 'TwentyFourteen_Accordion_Menu_enqueue_scripts); ?
Но хотелось бы мне еще несколько новых движений, чтобы iPad Pro стал еще более похожим на ПК?