Page opacity when menu is open

[hentsch]

Hello,
How could I do to change the opacity of the page when the menu is open (like with the modal dialog).
My menu color is not enough different from the background so it is sometimes difficult to see it.
See attachment, it is more explicit !
Thanks !

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

This is not something that can be done by default.

To implement this modification, you would need to work with a developer to assist you with this.

Thanks,
David.

[hentsch]

ok thanks !

[Rui Guerreiro – SUPPORT]

No problem. Thanks David.
-Rui

[hentsch]

Hello,

I finaly code this, in case it could help someone. It’s not yet perfect but, for me, better than without.

Just put it in custom JS of theme options, and change “menu-menu-par-activite-1” by yours. You can see the result here : mouskif.ch

<script>
jQuery(document).ready( function ($) {
	$('#container').append('<div id="vh-menu-shadow" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(0,0,0); z-index: 1; opacity: 0;display:none;"></div>');
});

jQuery(document).ready( function ($) {
	$('#menu-menu-par-activite-1').hover( 
		function() {
			$('#vh-menu-shadow').fadeTo(400,0.5);
		},
		function() {
			$('#vh-menu-shadow').fadeOut(500);
		}
	);
});
</script>

Regards
Vince

[Mohammad – SUPPORT]

Hi,
Brilliant! I am glad that you managed to resolve the issue.
Thanks
Mohammad

[hentsch]

UPDATE:
– z-index value
– fadeOut time & shape
– div id name
– menu ID

<script>
jQuery(document).ready( function ($) {
	$('#container').append('<div id="bg-menu-shadow" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(0,0,0); z-index: 3; opacity: 0;display:none;"></div>');
	$('#REPLACE_WITH_YOUR_MENU_ID').hover( 
		function() {
			$('#bg-menu-shadow').fadeTo(400,0.5);
		},
		function() {
			$('#bg-menu-shadow').fadeOut(700,'easeInExpo');
		}
	);
});
</script>

[Mohammad – SUPPORT]

Hi,
Great work so far.
Mohammad

[hentsch]

UPDATE:
– setTimeout in enter and leave menu to avoid shadow background to be activated when you just move the mouse over the menu, without willing to show the menu.
– change the selector to only activate on menu item and not the whole line

<script>
jQuery(document).ready( function ($) {
	$('#container').append('<div id="bg-menu-shadow" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(0,0,0); z-index: 3; opacity: 0;display:none;"></div>');
	vhInMenu = 0;
	$('#menu-menu-par-activite-1').children().hover( 
		function() {
			vhInMenu = 1;
			setTimeout(function(){
				if(vhInMenu == 1){
					$('#bg-menu-shadow').fadeTo(400,0.5);
				}
			}, 250);
		}
			,
		function() {
			vhInMenu = 0;
			setTimeout(function(){
				if(vhInMenu == 0){
					$('#bg-menu-shadow').fadeOut(700,'easeInExpo');
				}
			}, 100);
		}
	);
});
</script>

[Mohammad – SUPPORT]

Hi,
Thanks for update.
Mohammad