Lam menu more and close category (ok)
Bước 1: Trong file function.php
// Redux
require_once "sample-config.php";
/* Max item Category Menu */
function vg_oregon_max_menu_item () {
$vg_oregon_options = get_option("vg_oregon_options");
$menu_max_number =(isset($vg_oregon_options['menu_max_number']) ? $vg_oregon_options['menu_max_number'] : "") + 1;
$vg_oregon_max_menu = 'menu_max_number = ' . $menu_max_number . ';';
wp_add_inline_script('vg-oregon-js', $vg_oregon_max_menu );
}
add_action('wp_head', 'vg_oregon_max_menu_item');
//
// frontend
if(! function_exists('vg_oregon_scripts'))
{
function vg_oregon_scripts()
{
$vg_oregon_options = get_option("vg_oregon_options");
wp_enqueue_script('vg-oregon-js', get_template_directory_uri() . '/js/blank.js', array('jquery'), '1.0', TRUE);
/** In Header **/
wp_add_inline_script('vg-oregon-js', 'var vg_oregon_ajaxurl = "'. esc_url(admin_url('admin-ajax.php', 'relative')) .'";');
}
}
add_action('wp_enqueue_scripts', 'vg_oregon_scripts', 99);
Bước 2: Redux
Redux::setSection($opt_name, array(
'icon' => 'fa fa-angle-right',
'title' => __('Menu Sticky', 'vg-oregon'),
'fields' => array(
array(
'id' => 'menu_max_number',
'type' => 'text',
'title' => esc_html__('Max Number Item Menu Category', 'vg-oregon'),
'default' => '8'
)
)
));
Bước 3: file js
// Menu Category Home3 VG Calaco
jQuery(document).ready(function($) {
// Toogle Menu Category
$(".category-inside .category-inside-title").click(function() {
$(this).parents('.category-inside').find(".category-inside-content").slideToggle("fast");
$(this).parents('.category-inside').toggleClass("open");
});
/*Max Menu Item category*/
if(menu_max_number <= jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container > ul > li').length) {
$(".category-inside-content .widget_nav_menu .menu-menu-categories-container >ul").after("<div class='morelesscate hidden-xs hidden-sm'><span class='morecate'><i class='ion-ios-more-outline'></i>More Categories</span><span class='lesscate'><i class='ion-ios-more-outline'></i>Close Menu</span></div>");
$(".category-inside-content").addClass("max-menu-item");
//For categories menu
var oldCateMenuH, realMMH, realCateMenuH;
jQuery(document).ready( function(){
//hide items out of height
var catemidx = 1;
jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container >ul > li.menu-item').each(function(){
if( (catemidx > menu_max_number) && jQuery('.morecate').css('display')!='none'){
jQuery(this).css('display', 'none');
jQuery(this).addClass('mhide');
}
catemidx++;
});
//More categories click
jQuery('.morelesscate').on('click', function() {
oldCateMenuH = menu_max_number * jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container >ul > li.menu-item').outerHeight() + jQuery('.catemenu-toggler').outerHeight();
realMMH = jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container >ul > li.menu-item').length * jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container >ul > li.menu-item').outerHeight();
realCateMenuH = realMMH + jQuery('.morelesscate').outerHeight();
if(jQuery('.morecate').css('display')=='none'){ /* opened menu */
jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container').css('overflow', 'hidden');
jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container').animate({'height': oldCateMenuH}, function(){
jQuery('.morecate').css('display', 'block');
jQuery('.lesscate').css('display', 'none');
jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container').css('overflow', 'visible');
jQuery('.mhide').css('display', 'none');
});
} else { /* closed menu */
jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container').css('overflow', 'hidden');
jQuery('.mhide').css('display', 'block');
jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container').animate({'height': realCateMenuH}, function(){
jQuery('.morecate').css('display', 'none');
jQuery('.lesscate').css('display', 'block');
jQuery('.category-inside-content .widget_nav_menu .menu-menu-categories-container').css('overflow', 'visible');
});
}
});
});
}
});
Last updated