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