Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Page opacity when menu is open
New Landing › How can we help? › Themeforest Theme Support › Dante › Page opacity when menu is open
- This topic has 9 replies, 4 voices, and was last updated 8 years by Mohammad – SUPPORT.
-
Posted in: Dante
-
June 3, 2016 at 4:17 pm #272360
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.June 6, 2016 at 12:21 pm #272652Hi,
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.June 9, 2016 at 1:32 pm #273502ok thanks !
June 9, 2016 at 1:59 pm #273510No problem. Thanks David.
-RuiJune 19, 2016 at 11:01 pm #275707Hello,
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
VinceJune 20, 2016 at 3:56 am #275726Hi,
Brilliant! I am glad that you managed to resolve the issue.
Thanks
MohammadJuly 3, 2016 at 2:31 pm #278810UPDATE:
– 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>
July 4, 2016 at 6:26 am #278849Hi,
Great work so far.
MohammadAugust 16, 2016 at 3:09 pm #287663UPDATE:
– 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>
August 16, 2016 at 3:12 pm #287664Hi,
Thanks for update.
Mohammad -
Posted in: Dante
You must be logged in and have valid license to reply to this topic.