0
45
2019-01-10

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

Решние разного рода проблем при активации "Top Left Menu" темы "Cactus"
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

Cactus MegaMenu для меню в лого посередине

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

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

Меню в WP

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

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

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

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

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

Суб меню для #top-left-menu должны быть обернуты в <div class="cactus-mega-menu-wrap"> (как указано на скрине ниже).

HTML код

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

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

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( "<div class='cactus-mega-menu-wrap'></div>" );
    });
} 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

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

<div class="cactus-mobile-drawer-header" style="display: none;">
<?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' => '<span>',
        'link_after' => '</span>',
    ) );

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

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' => '<span>',
    'link_after' => '</span>',
) );

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

<div class="cactus-mobile-drawer-header" style="display: none;">
<?php
   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' => '<span>',
        'link_after' => '</span>',
    ) );

  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' => '<span>',
        'link_after' => '</span>',
    ) );
?>