Как сделать выпадающее меню в WordPress

Как сделать выпадающее меню в WordPress

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

Но что, если вы хотите создать простое меню с несколькими элементами верхнего уровня и еще несколькими элементами, которые выпадают из них, когда пользователь наводит на них курсор?

Как сделать выпадающее меню в WordPress

Что вы будете создавать

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

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

Что вам понадобится

Чтобы следовать этому руководству, вам понадобятся:

установленный для разработки WordPress

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

редактор кода

Функционал встроенного меню WordPress

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

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

В своей проекте откройте файл header.php. Вы должны найти эту строку:

PHP

1wp_nav_menu( array( ‘container_class’ => ‘main-nav’, ‘theme_location’ => ‘primary’ ) );

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

wp_nav_menu() это функция, которая выбирает меню навигации и выводит его.

Затем параметры упаковываются в массив.

container_class — это класс CSS, который будет передан контейнеру, в который заключено меню. В данном случае это main-nav. Это то, на что мы будем нацелены с помощью нашего CSS позже.

theme_location => primary сообщает WordPress, что это основная навигация. Если я создам меню на панели администратора и установлю флажок «Основное», то это меню будет использоваться для этого места в коде.

READ
Прекратите использование иконочных шрифтов

Иногда вам может потребоваться добавить меню навигации в другом месте вашего проекта, например, в нижний колонтитул, и в этом случае вы не хотите использовать theme_location => primary. Вы можете использовать это только для одного меню. Но вы можете захотеть использовать дополнительные параметры, которые можете найти на странице справочника WordPress wp_nav_menu().

Вот флажок для основного меню в разделе «Меню» панели администрирования:

Как сделать выпадающее меню в WordPress

Вывод кода функцией wp_nav_menu()

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

Как сделать выпадающее меню в WordPress

Теперь вот вывод HTML для этого меню:

123456789101112131415161718<div class=”main-nav”>    <ul id=”menu-navbar” class=”menu”>        <li id=”menu-item-610″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610″><a href=”https://121interviewcoaching.co.uk/”>Home</a></li>        <li id=”menu-item-613″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-613″><a href=”https://121interviewcoaching.co.uk/about/”>About Me</a></li>        <li id=”menu-item-615″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615″><a href=”https://121interviewcoaching.co.uk/services/”>Services</a>            <ul class=”sub-menu”>                <li id=”menu-item-618″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-618″><a href=”https://121interviewcoaching.co.uk/services/services-for-individuals/”>Preparing for interviews / individuals</a></li>                <li id=”menu-item-617″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-617″><a href=”https://121interviewcoaching.co.uk/services/services-for-groups/”>Preparing for interviews / groups</a></li>                <li id=”menu-item-619″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-619″><a href=”https://121interviewcoaching.co.uk/services/conducting-interviews/”>Conducting interviews</a></li>            </ul>        </li>        <li id=”menu-item-30780″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-30780″><a href=”https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/”>My Book</a></li>        <li id=”menu-item-614″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-614″><a href=”https://121interviewcoaching.co.uk/clients-2/”>Clients</a></li>        <li id=”menu-item-616″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-616″><a href=”https://121interviewcoaching.co.uk/interview-tips/”>Interview Tips</a></li>        <li id=”menu-item-612″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-612″><a href=”https://121interviewcoaching.co.uk/where-i-work/”>Areas covered</a></li>        <li id=”menu-item-611″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-611″><a href=”https://121interviewcoaching.co.uk/contact/”>Contact &#038; Links</a></li>    </ul></div><!– #main-nav –>

Если вы изучите этот код, вы увидите, что он состоит из:

Div с классом main-nav, определенным в функции wp_nav_menu().

Внутри — идентификатор ul menu-navbar и класс menu. Это значения по умолчанию, определенные WordPress.

Внутри него несколько элементов li , каждый с классом menu-item menu-item-type-post_type, плюс другие классы, специфичные для типа сообщения, к которому ведет пункт меню, и состояния этого пункта меню в то время. У каждого из них также есть уникальный идентификатор, номер которого соответствует идентификатору сообщения пункта меню навигации в базе данных.

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

Кодирование CSS для создания выпадающего меню

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

Когда страница открыта, пункты меню второго уровня скрыты.

Когда пользователь наводит курсор на элемент верхнего уровня, появляются элементы второго уровня под ним.

READ
Использование Gutenberg улучшает показатели Gore Web Vitals сайта

Скрытие элементов второго уровня по умолчанию

В таблице стилей вашего проекта начните с скрытия элементов второго уровня по умолчанию. Добавь это:

CSS

123main-nav ul ul {    display: none;}

Это скроет элемент ul внутри другого элемента ul внутри элемента main-nav. Однако он не скроет элемент верхнего уровня ul, так как требует, чтобы один ul был вложен в другой ul внутри меню.

Теперь, если вы откроете страницу и попытаетесь просмотреть элементы второго уровня, это будет невозможно — они будут скрыты. Давай исправим это.

Отображение элементов второго уровня при наведении курсора

Теперь нам нужно убедиться, что ul, вложенный внутрь li верхнего уровня будет отображаться при наведении курсора на li верхнего уровня. Добавьте это в свою таблицу стилей:

CSS

123.main-nav ul li:hover > ul {    display: block;}

Теперь, когда вы наводите указатель мыши на элемент верхнего уровня, появится список под ним. Но вы обнаружите, что он не будет отображаться так, как вы этого хотите. В частности, он будет перемещать содержимое под меню. Мы хотим, чтобы он выглядел так, как будто он выплывает поверх содержимого. Чтобы исправить это, нам нужно добавить к нашему ul другой ul элемент.

Добавление стиля макета списку второго уровня

Откройте свою таблицу стилей и найдите в ней строку с display: none. Отредактируйте этот блок, чтобы добавить стиль разметки:

CSS

12345678910.main-nav ul ul {    display: none;    position: absolute;    top: 3em;    left: 0;    z-index: 99999;    width: 180px;    background: #fff;    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);}

Вам также необходимо указать относительное позиционирование элемента списка верхнего уровня:

CSS

123.main-nav li {    position: relative;}

Давайте посмотрим, что делает этот код:

position: absolute дает списку второго уровня абсолютное позиционирование, исключая его из потока элементов на странице. Для элемента более высокого уровня position: relative помещает список верхнего уровня в поток страницы и позволяет разместить внутри него абсолютно позиционированный элемент.

top: 3em позиционирует верх списка относительно верха элемента, внутри которого он находится, а именно элемента списка верхнего уровня. Это 3em значение отражает высоту панели навигации верхнего уровня. Отредактируйте свой, если у вашей навигации верхнего уровня другая высота.

left: 0 размещает список слева относительно элемента над ним.

z-index: 99999 определяет, где находится элемент в трехмерной модели страницы. Высокое значение 99999 гарантирует, что он будет отображаться поверх всего остального.

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

Теперь давайте посмотрим, что мы видим, когда наводим курсор на элемент верхнего уровня:

Как сделать выпадающее меню в WordPress

Работает! При наведении курсора на элемент верхнего уровня теперь отображается раскрывающееся меню.

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

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

Меню здесь слишком велико, чтобы поместиться на маленьком экране, поэтому лучшее решение — отредактировать CSS на маленьких экранах и использовать некоторый JavaScript. Вот как это сделать.

READ
Руководство для новичков по Headless CMS и Jamstack

Добавление значка меню в баннер

Сначала добавьте значок, который нужно будет нажимать, чтобы получить доступ к меню на маленьком экране. Добавьте это в файл header.php в то место, где вы хотите разместить значок меню:

1<a class=”toggle-nav” href=“#”>&#9776;</a>

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

Добавление CSS для Burger Menu

Теперь вам нужно добавить CSS в таблицу стилей. Сначала скройте значок на больших экранах:

CSS

123.toggle-nav {    display: none !important;}

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

CSS

1234567891011121314151617181920212223242526272829303132333435363738394041@media screen and ( max-width: 550px) {    a.toggle-nav {        float: right;        margin: 0 0 0.5em 0.5em;        display: inline-block !important;        color: #fff;        transition: color linear 0.15s;    }         a.toggle-nav:hover, a.toggle-nav:active {        text-decoration: none;        color: #fff;    }         .menu-header {        display: inline-block;        position: relative;        margin: 0;        width: 100%;    }         #access .menu-header ul {        display: none;        position: absolute;        top: 80%;        right: 0px;        min-width: 200px;        background-color: #7B3D84;        font-size: 1.2em;    }         #access .menu-header li {        display: block;        float: none;        padding-right: 2%;        text-align: right;    }    #access ul li:hover > ul {        display: none;    }}

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

Добавление JavaScript

Последний шаг — добавить скрипт, чтобы меню отображалось, когда пользователь нажимает на значок. Создайте в своей теме папку с именем scripts и внутри нее новый файл с именем burger-menu.js и добавьте в него следующее:

JavaScript

12345678jQuery(document).ready(function() {    jQuery(‘.toggle-nav’).click(function(e) {        jQuery(‘.menu-header ul.menu’).slideToggle(500);          e.preventDefault();    });     });

Теперь убедитесь, что ваш скрипт вызывается. В файле functions.php добавьте функцию для постановки скрипта в очередь:

PHP

123456function tutsplus_burger_menu_scripts() {         wp_enqueue_script( ‘burger-menu-script’, get_stylesheet_directory_uri() . ‘/scripts/burger-menu.js’, array( ‘jquery’ ) );  }add_action( ‘wp_enqueue_scripts’, ‘tutsplus_burger_menu_scripts’ );

Теперь сохраните все файлы, и у вас будет burger menu на маленьких экранах.

Как сделать выпадающее меню в WordPress

Выпадающие меню полезны для небольших многоуровневых меню

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

Возможность добавить подобное меню в свои проекты даст вам больше гибкости и улучшит взаимодействие с пользователем. И вы можете сделать это с помощью всего нескольких строк CSS.

Автор: Rachel McCollin

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий