TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Cactus – Улучшение Top Left Menu + megamenu для меню с лого по середине

1 183

Приветствую друзья, данная статья скорее предназначена для моего личного пользования. Но я не исключаю что возможно она пригодиться и не только мне, в любом случае для применения и понимания того что здесь описано нужно иметь опыт в работе с CSS, JS, PHP. Если вкратце, я не буду здесь не чего расписывать и в случае если Вы не используете тему Cactus данный пост Вам наврят ли пригодится. И еще за ранее прошу прощение за обложку поста… ).

Пример отображения меню с лого по середине

Для того что бы мега меню заработало для меню “Top Left Menu (Split Navigation Bar)”:

Меню в WP

Применяем класс cactus-mega-menu к пунктам меню

У пункта меню который содержит мега меню должен быть класс cactus-mega-menu

По этому применяем данный класс прям в пункте меню:

Указываем класс в меню

Оборачиваем суб меню <div class=”cactus-mega-menu-wrap”>

Суб меню для #top-left-menu должны быть обернуты в

(как указано на скрине ниже).

HTML код

Для этого добавляем скрипт:

CSS

/* Отменяем фиксацию меню для моб устройств*/ @media screen and (max-width:767px){ div#SDStudio_Fixed_Menu { position: relative !important; } }

JS конечная версия скрипта:

CSS стили при помощи которых можно выделить основные пункты меню

Для того что бы можно было выделить основные пункты меню обязательно должен быть проставлен класс “cactus-mega-menu” во всех основных пунктах меню (как на скрине выше). Стили ниже прежде всего созданы для мобильной версии сайта

Как отобразить Top Left Menu на мобильной версии сайта

Переходим в файл:

/wp-content/themes/Cactus/template-parts/navigation/navigation-mobile.php

И сразу за кодом:

Вставляем код:

Должно получиться:

Функционал Mega Menu с отключением стандартной реализации Cactus (для дочерних тем) при помощи Carbon Fields

Этот вариант будет полезен при наличии дочерней темы и плагина Carbon Fields. Для появляения выпадающего пунка меню реализцующего активацию мега меню, добавляем в functions.php код ниже:

В начале отключаем функционал реализации мега меню темы Cactus при помощи снипета @_ДЕАКТИВИРУЕМ_РОДИТЕЛЬСКУЮ_ФУНКЦИЮ. Далее добавляем класс cactus-mega-menu к пунктам меню при помощи снипета * @_АКТИВИРУЕМ_CARBON_FIELDS_MEGA_MENU

И добавляем JS благодаря которому осуществим оборачивание дочерних пунктов меню:

Источник записи:

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