Hover to click in wordpress menu

2 comments

1. What’s happening when someone currently hovers, it does one thing while hovering and when they leave it has to d a sort of cleanup which are the two functions within hoverintent, namely over and out so the code would need to be split into two event listeners one for click of the element and one for blur

   I have chained the two listeners to the inital selector so it should all work.

       var nav = {
           init: function() {
   
               // Add parent class to items with sub-menus
               jQuery("ul.sub-menu").parent().addClass('parent');
   
               var menuTop = 40;
               var menuTopReset = 80;
   
               // Enable click dropdowns for window size above tablet width
   jQuery("nav").find(".menu li.parent").on('click', function (event) {
       if($(event.target).parent().hasClass('menu-item-has-children')){
        event.preventDefault();
       };
       if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
           // Setup menuLeft variable, with main menu value
           var subMenuWidth = jQuery(this).find('ul.sub-menu').first().outerWidth(true);
           var mainMenuItemWidth = jQuery(this).outerWidth(true);
           var menuLeft = '-' + (Math.round(subMenuWidth / 2) - Math.round(mainMenuItemWidth / 2)) + 'px';
           var menuContainer = jQuery(this).parent().parent();
   
           // Check if this is the top bar menu                            
           if (menuContainer.hasClass("top-menu")) {
               if (menuContainer.parent().parent().parent().hasClass("top-bar-menu-right")) {
                   menuLeft = "";
               } else {
                   menuLeft = "-1px";
               }
               menuTop = 30;
               menuTopReset = 40;
           } else if (menuContainer.hasClass("header-menu")) {
               menuLeft = "-1px";
               menuTop = 28;
               menuTopReset = 40;
           } else if (menuContainer.hasClass("mini-menu") || menuContainer.parent().hasClass("mini-menu")) {
               menuTop = 40;
               menuTopReset = 58;
           } else {
               menuTop = 44;
               menuTopReset = 64;
           }
   
           // Check if second level dropdown
           if (jQuery(this).find('ul.sub-menu').first().parent().parent().hasClass("sub-menu")) {
               menuLeft = jQuery(this).find('ul.sub-menu').first().parent().parent().outerWidth(true) - 2;
           }
   
           jQuery(this).find('ul.sub-menu').first().addClass('show-dropdown').css('top', menuTop);
       }
   }).on('mouseleave',function () {
       if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
           jQuery(this).find('ul.sub-menu').first().removeClass('show-dropdown').css('top', menuTopReset);
       }
   });     
               // Toggle Mobile Nav show/hide          
               jQuery('a.show-main-nav').on('click', function(e) {
                   e.preventDefault();
                   if (jQuery('#main-navigation').is(':visible')) {
                   jQuery('.header-overlay .header-wrap').css('position', '');
                   } else {
                   jQuery('.header-overlay .header-wrap').css('position', 'relative');
                   }
                   jQuery('#main-navigation').toggle();
               });
   
               jQuery(window).smartresize(function(){  
                   if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
                       var menus = jQuery('nav').find('ul.menu');
                       menus.each(function() {
                           jQuery(this).css("display", "");
                       });
                   }
               });
   
               // Set current language to top bar item
               var currentLanguage = jQuery('li.aux-languages').find('.current-language span').text();
               if (currentLanguage !== "") {
                   jQuery('li.aux-languages > a').text(currentLanguage);
               }
   
           },
           hideNav: function(subnav) {
               setTimeout(function() {
                   if (subnav.css("opacity") === "0") {
                       subnav.css("display", "none");
                   }
               }, 300);
           }
       };
   

   Log in to Reply

2. That seems overly complicated. Do you have a link to the live version?

   Usually, when doing a click-to-see submenu with a clickable parent, I set a variable to see whether the menu is open, if not dont go to link. if so, go to link.

   An example: http://codepen.io/jhealey5/pen/iLgom

       var $handle = $('.sub-menu').prev();
   
       var opened = 0;
       $handle.on('click', function(e){
   
         if (opened) {
           window.location.href = $(this).attr('href');
         } else {
           e.preventDefault();
           e.stopPropagation();
           $('.sub-menu').slideToggle();
           opened = 1;
         }
       });
   
       $('html').on('click', function(){
         if (opened) {
           $('.sub-menu').slideToggle();
           opened = 0;
         }
       });
   

   Depending on that menu of yours, you could use something similar. But it’s using a lot of code for a menu.

   Log in to Reply