[joanosgoodbyParticipant]

How can I get submenu dropdown items to display only on click (not hover)?

THANKS

[CousettMember]

Joan,
This is a bit tricky, as you’ll need to patch one of the files in the theme.

Using your ftp client (like Filezilla), go to your site, then wp-content/themes/x/framework/js/src/site/vendor
Look for a file named superfish.js. Replace the contents of that file with what’s below.

Please make a note of this change somewhere in your records. Whenever you update the theme you’ll need to re-patch the file. And let us know if this works!

/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

;(function($){
    $.fn.superfish = function(op){

        var sf = $.fn.superfish,
            c = sf.c,
            $arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
            over = function(){
                var $this = $(this), menu = getMenu($this);
                clearTimeout(menu.sfTimer);
                $this.showSuperfishUl().siblings().hideSuperfishUl();
            },
            out = function(){
                var $this = $(this), menu = getMenu($this), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                    o.retainPath=($.inArray($this[0],o.$path)>-1);
                    $this.hideSuperfishUl();
                    if (o.$path.length && $this.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay); 
            },
            getMenu = function($menu){
                var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
            },
            addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

        return this.each(function() {
          var $this = $(this);
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
            o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
                $(this).addClass([o.hoverClass,c.bcClass].join(' '))
                    .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;
      // CHANGED: by KARL SWEDBERG
            if ( (o.eventType === 'hoverIntent' && !$.fn.hoverIntent) || !(/^(?:hover|hoverIntent|toggle)$/).test(o.eventType) ) {
              o.eventType = 'hover';
            }
            $this.find('li:has(ul)')[o.eventType](over,out).each(function() {
                if (o.autoArrows) {
                  addArrow( $('>a:first-child',this) );
                 // this.addClass("yourClass");
                }
            })
            .not('.'+c.bcClass)
                .hideSuperfishUl();

            $this.find('a').each(function(i){
                var $a = $(this), $li = $a.parents('li');
                $a.focus(function(){over.call($li);}).blur(function(){out.call($li);});
                $a.click(function(event) {
                  event.preventDefault();
                  if ( !$a.hasClass("sf-with-ul") ) {
                    location.href = this.href;
                  }
                });
            });
            o.onInit.call(this);

        }).each(function() {
            var menuClasses = [c.menuClass];
            if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) {
              menuClasses.push(c.shadowClass);
            }
            $(this).addClass(menuClasses.join(' '));
        });
    };

    var sf = $.fn.superfish;
    sf.o = [];
    sf.op = {};
    sf.IE7fix = function(){
        var o = sf.op;
        if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) {
            this.toggleClass(sf.c.shadowClass+'-off');
        }
        };
    sf.c = {
        bcClass     : 'sf-breadcrumb',
        menuClass   : 'sf-js-enabled',
        anchorClass : 'sf-with-ul',
        arrowClass  : 'sf-sub-indicator',
        shadowClass : 'sf-shadow'
    };
    sf.defaults = {
        hoverClass  : 'sfHover',
        pathClass   : 'overideThisToUse',
        pathLevels  : 1,
        delay       : 800,
        animation   : {opacity:'show'},     
        speed       : 'normal',
        closeAnimation: {opacity: 'hide'},
        closeSpeed: 0,
        autoArrows  : true,
        dropShadows : true,
    // CHANGED: by KARL SWEDBERG
        eventType   : 'toggle', // one of 'toggle', 'hover', or 'hoverIntent'
    // disableHI  : false,    // true disables hoverIntent detection
        onInit      : function(){}, // callback functions
        onBeforeShow: function(){},
        onShow      : function(){},
        onHide      : function(){}
    };
    $.fn.extend({
        hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $closingLi = $(['li.',o.hoverClass].join(''),this).add(this).not(not);
            var $ul = $closingLi
                    .find('>ul');
            $ul.animate(o.closeAnimation, o.closeSpeed, function() {
              $closingLi.removeClass(o.hoverClass);
        $ul.css('visibility','hidden');
      });
            o.onHide.call($ul);
            return this;
        },
        showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
                    .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
        }
    });

})(jQuery);

[joanosgoodbyParticipant]

No, unfortunately it did not work. The submenus STILL display on hover: http://wp.monmouthrubber.com/

Maybe there is a different way to solve the problem? Here is the issue:

The logo and main menu are “Inline” in the header with a background image. I designed the bg image so the menu appears across a horizonatl ble band in the bg image. The problem is that when you hover the mouse below the menu anywhere in the header – even UNDER the menu, the dropdown submenus display.

Is there a way to set up header using tables – with the logo in the header in Col 1 – and menu in col 2, row one, and have a blank col 2, row 2? I can dissect the background and set it up in tables if this is possible????

[ZeshanMember]

Hi there,

Upon checking, it seems you have given a fixed height of 188px to your menu links, please try using following CSS code under Custom > CSS in the Customizer to avoid this situation:

.x-navbar .x-nav > li > a {
   height: 40px;
}

.x-navbar .x-nav > li {
   height: 188px;
}

Hope this helps. 🙂

Thank you.

[joanosgoodbyParticipant]

I added this to the custom code, but still having same issue. ???

[ZeshanMember]

Hi there,

We’re sorry for the confusion, please use following CSS code instead:

@media (min-width: 980px) {
   .x-navbar .x-nav {
      height: 188px;
   }

   .x-navbar .x-nav > li > a {
      height: 40px;
   }
}

Hope this helps. 🙂

Thank you.

[joanosgoodbyParticipant]

Yay! That did the trick! Thanks. Due to your awesome support, I will always buy this theme!

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Andrew MParticipant]

Hi there,

I’d really really like this function too! (is there any way you can add it into your next release?:D).

I’ve edited the superfish.js and I don’t think I have any fixed heights on the .x-nav links but the submenus still appear on hover.

Could it be that I’m using a child theme?

here’s the link to my site: http://newrsawebsite.redsquirrelarchitects.com/profile/

Thanks,

Andrew.

[ZeshanMember]

Hi Andrew,

Thank you for posting in!

It seems you’re using latest version of the theme, we’ve added the superfish script in our main body script (x-body.min.js). The above provided workaround is for older versions of the theme.

At the moment this is possible only with custom development, regretfully, which will fall beyond the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

I’ll also consider it as a featured request and forward to our development team. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks for understanding. Take care!

[alanosaurasParticipant]

WANT THIS

[ChristopherModerator]

We already add it to our featured requests list.

[Author]

Posts