1.7 Main menu et vertical dropdown

@rthur · October 9, 2020

Salut.

J'essaie de rendre mon submenu vertical et non horizontal comme aujourd'hui. Le problème c'est qu'il me crée automatiquement un wifth et je n'arrive pas à trouver son origine. Ce n'est visiblement pas dans le css c'est plus en dur dans le code il me semble. Or dans le ps_mainmenu.tpl ce style n'apparait nul part...

Auriez-vous une idée de son origine?
Merci

Prestashop 1.7.5

Edited November 4, 2020 by @rthur (see edit history)

doekia · October 9, 2020

Dans le module jhpmenu, très probablement dans le js associé.

@rthur · October 9, 2020

58 minutes ago, doekia said:

Dans le module jhpmenu, très probablement dans le js associé.

Merci. Je ne connais vraiment pas bien le js donc comment puis-trouver dans le js associé? Je ne trouve aucun appel à un code js

doekia · October 9, 2020

Aucune idée, voir avec le développeur du module

AfterGlow93 · October 9, 2020

C'est un thème fourni par JHP ? Il n'y pas un module qui gère le menu comme chez AngarTheme par exemple ?

@rthur · October 9, 2020

6 minutes ago, AfterGlow93 said:

C'est un thème fourni par JHP ? Il n'y pas un module qui gère le menu comme chez AngarTheme par exemple ?

Oui il est fourni par eux. Le module de menu c'est le menu de base modifié j'imagine car il se trouve dans le repertoire ps_mainmenu. Il y a effectivement dans le js des mentions du "submenu width" mais je n'y comprends rien en js donc je vais essayer de contacter JHP...

J'ai essayé de commenter cette partie mais ca ne change rien :

	function DesktopMenu(jhp){
		if (document.body.clientWidth > mobileViewSize) 
		{
			var obj = jhp;
			var extraWidth = 0;
			var new_width_popup = 0;
			var wrapWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').outerWidth(true);
			var wrapHeightPopup = $(obj).find('.jhpmain-menu-sub-menu').outerHeight(true);				
			var actualWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').width();
			extraWidth = wrapWidthPopup - actualWidthPopup;
			var new_width_popup = $(obj).find('.jhpmain-menu-sub-menu .top-menu').outerWidth(true);
		/*	var menuWidth = $('.jhpcmsmain-menu-wrapper').width();
			var subMenuLiWidth = $(obj).find('.jhpmain-menu-sub-menu > ul > li').outerWidth(true);
			var totalSubMenu = $(obj).find('.jhpmain-menu-sub-menu > ul > li').length;  
			var popupFinalWidth = (totalSubMenu * subMenuLiWidth)+60; */
			var menuTopOffset = $(".jhpcmsdesktop-wrapper-navbar").offset();//menu top margin or other spacing
			var menuLiHeightOffset  = $(obj).offset();//menu inside top position like table
			var menuLiHeight  = $(obj).outerHeight(true);//line height of menu
			var menuPopopTop  = (menuLiHeightOffset.top - menuTopOffset.top) + menuLiHeight -95;

			var new_outer_width_popup = new_width_popup + extraWidth;
			if(popupFinalWidth > menuWidth){
				popupFinalWidth = menuWidth+20;
			}
			if(popupFinalWidth > new_outer_width_popup){
				new_outer_width_popup = popupFinalWidth+20;
			}
			if(wrapHeightPopup >= 400){//auto scroll when popup is bigger
				$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-auto-scroll');
			}else{
				$(obj).find('.jhpmain-menu-sub-menu').removeClass('jhp-auto-scroll');
			}
			var wraper = $('.jhpcmsmain-menu-wrapper');
			var wWraper = wraper.outerWidth();
			var posWraper = wraper.offset();
			var pos = $(obj).offset();
			var xLeft = pos.left - posWraper.left;
			if ((xLeft + new_outer_width_popup) > wWraper) xLeft = wWraper - new_outer_width_popup;
			$(obj).find('.jhpmain-menu-sub-menu').css('left', xLeft);
			$(obj).find('.jhpmain-menu-sub-menu').css('top',menuPopopTop);
			$(obj).find('.jhpmain-menu-sub-menu').css('width', popupFinalWidth);
			
			//$(obj).find('.jhpmain-menu-sub-menu').stop(true, true).slideDown(500, 'swing');//show popup
			$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-desk-open');
			
		}

AfterGlow93 · October 9, 2020

13 minutes ago, @rthur said:

Oui il est fourni par eux. Le module de menu c'est le menu de base modifié j'imagine car il se trouve dans le repertoire ps_mainmenu. Il y a effectivement dans le js des mentions du "submenu width" mais je n'y comprends rien en js donc je vais essayer de contacter JHP...

J'ai essayé de commenter cette partie mais ca ne change rien :


	function DesktopMenu(jhp){
		if (document.body.clientWidth > mobileViewSize) 
		{
			var obj = jhp;
			var extraWidth = 0;
			var new_width_popup = 0;
			var wrapWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').outerWidth(true);
			var wrapHeightPopup = $(obj).find('.jhpmain-menu-sub-menu').outerHeight(true);				
			var actualWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').width();
			extraWidth = wrapWidthPopup - actualWidthPopup;
			var new_width_popup = $(obj).find('.jhpmain-menu-sub-menu .top-menu').outerWidth(true);
		/*	var menuWidth = $('.jhpcmsmain-menu-wrapper').width();
			var subMenuLiWidth = $(obj).find('.jhpmain-menu-sub-menu > ul > li').outerWidth(true);
			var totalSubMenu = $(obj).find('.jhpmain-menu-sub-menu > ul > li').length;  
			var popupFinalWidth = (totalSubMenu * subMenuLiWidth)+60; */
			var menuTopOffset = $(".jhpcmsdesktop-wrapper-navbar").offset();//menu top margin or other spacing
			var menuLiHeightOffset  = $(obj).offset();//menu inside top position like table
			var menuLiHeight  = $(obj).outerHeight(true);//line height of menu
			var menuPopopTop  = (menuLiHeightOffset.top - menuTopOffset.top) + menuLiHeight -95;

			var new_outer_width_popup = new_width_popup + extraWidth;
			if(popupFinalWidth > menuWidth){
				popupFinalWidth = menuWidth+20;
			}
			if(popupFinalWidth > new_outer_width_popup){
				new_outer_width_popup = popupFinalWidth+20;
			}
			if(wrapHeightPopup >= 400){//auto scroll when popup is bigger
				$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-auto-scroll');
			}else{
				$(obj).find('.jhpmain-menu-sub-menu').removeClass('jhp-auto-scroll');
			}
			var wraper = $('.jhpcmsmain-menu-wrapper');
			var wWraper = wraper.outerWidth();
			var posWraper = wraper.offset();
			var pos = $(obj).offset();
			var xLeft = pos.left - posWraper.left;
			if ((xLeft + new_outer_width_popup) > wWraper) xLeft = wWraper - new_outer_width_popup;
			$(obj).find('.jhpmain-menu-sub-menu').css('left', xLeft);
			$(obj).find('.jhpmain-menu-sub-menu').css('top',menuPopopTop);
			$(obj).find('.jhpmain-menu-sub-menu').css('width', popupFinalWidth);
			
			//$(obj).find('.jhpmain-menu-sub-menu').stop(true, true).slideDown(500, 'swing');//show popup
			$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-desk-open');
			
		}

Attention, regarde la fonction : if (document.body.clientWidth > mobileViewSize)

Ca concerne le mobile uniquement, tu dois avoir autre chose avec cette fonction "DesktopMenu" .

Sur le mobile, tu avais un wrapper qui prenait tout l'écran du téléphone, il a disparu (pas pratique du coup) :

Pour tester en mobile, la vue Mobile View du DevMode de Google chrome t'aidera (ou en redimensionnant la fenêtre, par exemple)

Edited October 9, 2020 by AfterGlow93 (see edit history)

@rthur · October 9, 2020

1 minute ago, AfterGlow93 said:

Attention, regarde la fonction : if (document.body.clientWidth > mobileViewSize)

Ca concerne le mobile uniquement, tu dois avoir autre chose avec cette fonction "DesktopMenu" .

Pour tester en mobile, la vue Mobile View du DevMode de Google chrome t'aidera (ou en redimensionnant la fenêtre, par exemple)

Merci mais au contraire non? La c'est desktop uniquement "si document.body.clientWidth est superieur à mobileviewsize". De plus il y a marqué function DesktopMenu en haut

AfterGlow93 · October 9, 2020

2 minutes ago, @rthur said:

Merci mais au contraire non? La c'est desktop uniquement "si document.body.clientWidth est superieur à mobileviewsize". De plus il y a marqué function DesktopMenu en haut

Totalement d'accord, mais c'est côté mobile que ça a bougé, étrangement.

@rthur · October 9, 2020

2 minutes ago, AfterGlow93 said:

Totalement d'accord, mais c'est côté mobile que ça a bougé, étrangement.

Tout est la je pense


	$(window).resize(function(){
		$('.jhpmain-menu-dropdown').removeClass('open');
	});

	function DesktopMenu(jhp){
		if (document.body.clientWidth > mobileViewSize) 
		{
			var obj = jhp;
			var extraWidth = 0;
			var new_width_popup = 0;
			var wrapWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').outerWidth(true);
			var wrapHeightPopup = $(obj).find('.jhpmain-menu-sub-menu').outerHeight(true);				
			var actualWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').width();
			extraWidth = wrapWidthPopup - actualWidthPopup;
			var new_width_popup = $(obj).find('.jhpmain-menu-sub-menu .top-menu').outerWidth(true);
			var menuWidth = $('.jhpcmsmain-menu-wrapper').width();
			var subMenuLiWidth = $(obj).find('.jhpmain-menu-sub-menu > ul > li').outerWidth(true);
			var totalSubMenu = $(obj).find('.jhpmain-menu-sub-menu > ul > li').length;  
			var popupFinalWidth = (totalSubMenu * subMenuLiWidth)+60;
			var menuTopOffset = $(".jhpcmsdesktop-wrapper-navbar").offset();//menu top margin or other spacing
			var menuLiHeightOffset  = $(obj).offset();//menu inside top position like table
			var menuLiHeight  = $(obj).outerHeight(true);//line height of menu
			var menuPopopTop  = (menuLiHeightOffset.top - menuTopOffset.top) + menuLiHeight -95;

			var new_outer_width_popup = new_width_popup + extraWidth;
			if(popupFinalWidth > menuWidth){
				popupFinalWidth = menuWidth+20;
			}
			if(popupFinalWidth > new_outer_width_popup){
				new_outer_width_popup = popupFinalWidth+20;
			}
			if(wrapHeightPopup >= 400){//auto scroll when popup is bigger
				$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-auto-scroll');
			}else{
				$(obj).find('.jhpmain-menu-sub-menu').removeClass('jhp-auto-scroll');
			}
			var wraper = $('.jhpcmsmain-menu-wrapper');
			var wWraper = wraper.outerWidth();
			var posWraper = wraper.offset();
			var pos = $(obj).offset();
			var xLeft = pos.left - posWraper.left;
			if ((xLeft + new_outer_width_popup) > wWraper) xLeft = wWraper - new_outer_width_popup;
			$(obj).find('.jhpmain-menu-sub-menu').css('left', xLeft);
			$(obj).find('.jhpmain-menu-sub-menu').css('top',menuPopopTop);
			$(obj).find('.jhpmain-menu-sub-menu').css('width', popupFinalWidth);
			
			//$(obj).find('.jhpmain-menu-sub-menu').stop(true, true).slideDown(500, 'swing');//show popup
			$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-desk-open');
			
		}
	}
	$('.jhpmenu-toggle-icon').click(function(){
		DesktopMenu($(this).parent().parent());
	});

	$('.jhpcmsmain-menu-wrapper > .jhp-header-menu > li').hover(function() {
		DesktopMenu(this);
	},function(){
		$(this).find('.jhpmain-menu-sub-menu').removeClass('jhp-desk-open');//hide popup
	});

	$(document).on('click','#jhpcms-mobile-view-header .jhpmenu-button', function(e){
		e.preventDefault();
		if ($('#jhpcmsmobile-horizontal-menu #jhp-top-menu').hasClass('open')) {
			$(this).removeClass('open');
			$('#jhpcmsmobile-horizontal-menu #jhp-top-menu').removeClass('open');
			$('.modal-backdrop.fade.in').remove();
		} else {
			removeDefaultDropdown();
			$(this).addClass('open');
			$('#jhpcmsmobile-horizontal-menu #jhp-top-menu').addClass('open');
			if ($('body').find('.modal-backdrop.fade').html() === undefined){
	       		$('body').append('<div class="modal-backdrop fade in"></div>');
          	}
			e.stopPropagation();
		}
	});

	$(document).on('click','.modal-backdrop.fade',function(){
		$('#jhpcmsmobile-horizontal-menu #jhp-top-menu').removeClass('open');
		$('#jhpcms-mobile-view-header .jhpmenu-button').removeClass('open');
		$(this).remove();
	});
	
	$(document).on('click','#jhpcmsmobile-horizontal-menu #jhp-top-menu .jhphorizontal-menu-drop-down-icon', function(e){
		$(this).parent().parent().find('.jhpmain-menu-mobile-dropdown').css('display','block');
	});

	$(document).on('click', '#jhpcmsmobile-horizontal-menu .jhp-has-child .jhpmenu-link-wrapper .jhpmenu-toggle-icon i', function(){
		if ($(this).hasClass('open')) {
			$(this).removeClass('open');
			$(this).parent().parent().next('.jhpmain-menu-mobile-dropdown').removeClass('open').stop(false).slideUp(500, "swing");
		} else {					
			$('#jhpcmsmobile-horizontal-menu .jhpmain-menu-dropdown').css('left', '0').css('top','0').css('width', '100%');
			$(this).addClass('open');
			$(this).parent().parent().next('.jhpmain-menu-mobile-dropdown').addClass('open').stop(false).slideDown(500, "swing");
		}
	});

Sign In

1.7 Main menu et vertical dropdown

Recommended Posts

@rthur

Link to comment

Share on other sites

doekia

Link to comment

Share on other sites

@rthur

Link to comment

Share on other sites

doekia

Link to comment

Share on other sites

AfterGlow93

Link to comment

Share on other sites

@rthur

Link to comment

Share on other sites

AfterGlow93

Link to comment

Share on other sites

@rthur

Link to comment

Share on other sites

AfterGlow93

Link to comment

Share on other sites

@rthur

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com