«
»
CactusWEBWordPressВсе для разработки шаблонов

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

Приветствую друзья, данная статья скорее предназначена для моего личного пользования. Но я не исключаю что возможно она пригодиться и не только мне, в любом случае для применения и понимания того что здесь описано нужно иметь опыт в работе с 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 код

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

jQuery(document).ready(function($){ // Обертываем суб меню для мега меню $('ul#top-menu-left li.cactus-mega-menu > .sub-menu').each(function(){ $(this).wrap( "" ); }); });

CSS

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

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

jQuery(document).ready(function($){ if ( $(window).width() >= 769){ // Обертываем суб меню для мега меню $('ul#top-menu-left li.cactus-mega-menu > .sub-menu').each(function(){ $(this).wrap( "" ); }); } else { // Меняем ID левого меню для срабатывания мобильного меню $('ul#top-menu-left').attr('id','top-menu'); } });

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

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

.cactus-mega-menu > .sub-menu > li{ font-weight: 800 !important; padding-bottom: 10px; } .cactus-mobile-main-nav > li > a{ font-weight: 800 !important; }

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

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

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

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

wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu', 'menu_class' => 'cactus-mobile-main-nav', 'fallback_cb' => 'cactus_menu_fallback', 'container' =>'', 'link_before' => '', 'link_after' => '', ) );

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

wp_nav_menu( array( 'theme_location' => 'top-left', 'menu_id' => 'top-menu-left', 'menu_class' => 'cactus-mobile-main-nav', 'fallback_cb' => 'cactus_menu_fallback', 'container' =>'', 'link_before' => '', 'link_after' => '', ) );

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

wp_nav_menu( array( 'theme_location' => 'top-left', 'menu_id' => 'top-menu-left', 'menu_class' => 'cactus-mobile-main-nav', 'fallback_cb' => 'cactus_menu_fallback', 'container' =>'', 'link_before' => '', 'link_after' => '', ) ); wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu', 'menu_class' => 'cactus-mobile-main-nav', 'fallback_cb' => 'cactus_menu_fallback', 'container' =>'', 'link_before' => '', 'link_after' => '', ) ); ?>

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

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

use Carbon_Fields\Container; use Carbon_Fields\Field; // ============== SDStudio Menu Options====================== // ============== START ====================================== add_action( 'carbon_fields_register_fields', 'SDStudio_menu_options' ); function SDStudio_menu_options() { Container::make( 'nav_menu_item', __( 'Menu Settings' ) ) ->add_fields( array( // Field::make( 'color', 'crb_color', __( 'Color' ) ), Field::make( 'select', 'sdstudio_mega_menu', 'Mega Menu' ) ->add_options( array( '0' => 'Нет', '1' => 'Да', ) ), )); } // ============== END ======================================= // ============== SDStudio Menu Options======================

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

/** * * @_ДЕАКТИВИРУЕМ_РОДИТЕЛЬСКУЮ_ФУНКЦИЮ * @_Cactus - глючная функция из-за которой перестал работать функционал раскрытия пункта меню в админ панели при редактировапнии меню. * */ add_action( 'after_setup_theme','REMOVE_Cactus_MegaMenu', 100 ); function REMOVE_Cactus_MegaMenu() { remove_action( 'init', 'cactus_setup_menu_custom_fields' ); } /** * * @_АКТИВИРУЕМ_CARBON_FIELDS_MEGA_MENU * * https://wordpress.stackexchange.com/questions/90649/add-class-to-menu-items-of-one-specific-menu-nav-menu-css-class * https://docs.carbonfields.net/#/containers/nav-menu-item */ function atg_menu_classes($classes, $item, $args) { // Объявляем переменную с методатой пункта меню $sdstudio_mega_menu = carbon_get_nav_menu_item_meta( $item->ID, 'sdstudio_mega_menu' ); // Если у пункта меню выбрана опция "Мега меню" добавляем класс пункту меню if($sdstudio_mega_menu == 1) { $classes[] = 'cactus-mega-menu'; } return $classes; } add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);

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

//Custum Cactus Mega Menu - Оборачиваем дочерние пункты для мега меню jQuery(document).ready(function($){ if ( $(window).width() >= 769){ // Обертываем суб меню для мега меню $('ul#top-menu li.cactus-mega-menu > .sub-menu').each(function(){ $(this).wrap( "" ); }); } else { // Меняем ID левого меню для срабатывания мобильного меню $('ul#top-menu').attr('id','top-menu'); } });
Связанные записи
WEBПолезные сайты

9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

Contact Form 7WEBWEB - PHPWordPressВсе для functions.phpПлагины

Как заставить Wordpress отправлять почту из Amazon EC2 с помощью SES

WordPressWP-RECALLВсе для functions.phpВсе для разработки плагиновВсе для разработки шаблоновПлагины

Как добавить в пункт (любого) меню ссылку для входа и выхода в Wordpress

Chrome AppsGoogleGoogle ChromeWEBWordPressПолезные сайты

Как улучшить английский язык при написании в WordPress или автоматическая проверка грамматики в браузере.

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

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