Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 3, 2018 at 1:20 am #993067
    blende64

    Hi

    I want to add a close button to the mega menu to manually close the menu on touch devices. Unfortunately, I have a hard time closing the menu manually with jQuery code. For example, if I use jQuery('.menu-item-mega-parent').trigger('mouseleave');, the menu is closed but can no longer be opened by touching the menu button (.menu-item-mega-parent). I’ve tried other solutions (e.g. jQuery('.avia_mega_div').toggle()), but always faced the problem that the menu cannot be opened anymore.

    The closed button is required as I need the mega menu to cover the full viewport. I am using Enfold 4.4.1 on WordPress 4.9.7.

    Any help is really appreciated.

    August 4, 2018 at 9:17 pm #993580
    Mike

    Hey Jeannette,
    Please include the url to you site so we can take a closer look at the mega menu.

    Best regards,
    Mike

    August 4, 2018 at 11:32 pm #993590
    blende64

    Hi Mike

    The URL of the site is http://wp.musikschule-uri.ch. In the mega menu you can find a close button (near the search filed) without any functionality yet.

    Many thanks, Jeannette

    August 5, 2018 at 10:08 am #993645
    Dude

    Hi,

    Please try this code instead – it will remove the open-mega-a class from the “Menü” button too:

    
jQuery('.menu-item-mega-parent').trigger('mouseleave');
jQuery('#menu-item-31 a').removeClass('open-mega-a');

    Best regards,
    Dude

    August 6, 2018 at 11:21 am #993885
    blende64

    Hi Dude

    Thank you for the code. I tested it, unfortunately without success. The menu won’t open once I close it with the code.

    I compared the html code before opening and after closing the menu. the code is completely identical.

    I have discovered the following: After closing the menu with the jQuery code, if I right click (touch) at any place, the context menu appears, which appears when clicking on a link. It seems as if a link was placed over the whole viewport. However, via developer tools I could not find anything corresponding.

    Thanks, Jeannette

    August 7, 2018 at 4:58 pm #994486
    Dude

    Hi,

    Can you please create me an admin account and I’ll look it it. I need to add/apply the js code directly to check which layer blocks the menu button.

    My guess is the overflow:hidden attribute needs to be set manually for #menu-item-31 menu item like

    
jQuery('.menu-item-mega-parent').trigger('mouseleave');
jQuery('#menu-item-31 a').removeClass('open-mega-a');
jQuery('#menu-item-31').css( "overflow", "hidden" );

    but maybe some other steps are required.

    Best regards,
    Dude

    August 7, 2018 at 6:05 pm #994510
    blende64
    This reply has been marked as private.
    August 7, 2018 at 7:16 pm #994531
    Dude

    Hey!

    I added this code to your functions.php file:

    
function avia_head_hook_javascript() {
    ?>
        <script>
        function av_close_menu(){
      		jQuery('.menu-item-mega-parent').trigger('mouseleave');
			jQuery('#menu-item-31 a').removeClass('open-mega-a');
			jQuery('#menu-item-31').css( "overflow", "hidden" );
    	}
        </script>
    <?php
}
add_action('wp_head', 'avia_head_hook_javascript');

    and this code into the text widget::

    
<a class="close_menu_button" onclick="av_close_menu()" href="javascript:void(0);">X</a>

    and it works for me now. I could close/open the menu multiple times without any errors…

    Regards,
    Peter

    August 7, 2018 at 11:44 pm #994619
    blende64

    Hi

    First of all: Thank you so much for your efforts.

    I can confirm it’s working when clicking on the close button. However, if I tap the close button on a touch device I still cannot reopen the menu. Were you able to reopen the menu on a touch device or with touch emulation in browser developer tools?

    Regards Jeannette

    August 8, 2018 at 8:59 am #994730
    Dude

    Hi,

    Yes, the menu also worked with the touch simulation enabled. Tbh I don’t think this would be a problem in the wild because most mobile devices won’t show the mega menu but the burger menu.

    Best regards,
    Dude

    August 8, 2018 at 10:36 pm #995165
    blende64

    Hi

    On my devices the solution didn’t work in Chrome but in Firefox. Finally, I’ve found a solution that works in both browsers:

    jQuery('.close_menu_button').on('click touch', function() {
    jQuery('.menu-item-mega-parent').trigger('mouseleave');
});

jQuery('.menu-item-mega-parent').on('click touch', function() {
    jQuery('.menu-item-mega-parent').trigger('mouseenter');
});

jQuery('.avia_mega_div').on('click touch', function(e) {
    e.stopPropagation();
});

    Unfortunately, the menu doesn’t open at all in MS Edge when touching the menu button. Monitoring the html code of .avia_mega_div I can see that the value uf of display changes from none to block to none and the opacity changes from 0 to 1 to 0. The problem remains, even if I remove the code mentioned above. Any ideas what could cause the problem in Edge?

    Many thanks, Jeannette

    August 9, 2018 at 3:19 pm #995527
    Dude

    Hi,

    I wasn’t able to reproduce this issue on my Win10 PC and notebook with IE or MS Edge but I’ll leave this thread open for the other support members – maybe they can reproduce it and can give you some hints.

    Best regards,
    Dude

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.