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

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

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

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

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

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

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

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

Что вам пригодится

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

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

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

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

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

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

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

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

PHP

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

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

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

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

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

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

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

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

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

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

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

Сейчас вот вывод HTML для этого меню:

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

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. Мы желаем добиться нескольких вещей:

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

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

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

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

CSS

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

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

Отображение частей второго уровня при наведении курсора

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

CSS

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

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

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

CSS

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

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS

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

CSS

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

Добавление JavaScript

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

JavaScript

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

PHP

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

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

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

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

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

Создатель: Rachel McCollin

По материалам webformyself.com

Добавить комментарий

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