Geek asks and answers

How to make the superfood menu open back when there is not enough space?

How to make superfood menu open back? I have included the supperfish menu in my facebook application on the fanpage page, there is not enough space for the menu extension because it works in an iframe. How can I solve this problem with a superfix or any other jQuery menu plugin, also excellent.

Thank.

Current situation The current situation

Expected Result The expected result

@Updated: This is a custom menu, and it does not have a menu level limit.

+5
source share
4 answers

I know this question is very old, but for reference only, here is how I fixed the indicated problem

var windowWidth;
$(document).ready(function (){
        windowWidth= $(window).width();
        $( window ).resize(function() {
            windowWidth = $(window).width();
        });

        $('.top-nav').superfish({
            onBeforeShow : function (){                 
                if(!this.is('.top-nav>li>ul')){
                    var subMenuWidth = $(this).width();
                    var parentLi = $(this).parent();                    
                    var parentWidth = parentLi.width();
                    var subMenuRight = parentLi.offset().left + parentWidth + subMenuWidth;
                    if(subMenuRight > windowWidth){
                        $(this).css({'left': 'auto', 'right': parentWidth+'px'});
                    } else {
                        $(this).css({'left': '', 'right': ''});
                    }
                }
            }
        });
 });
+4
source

script . , , .

// 2/3/4th level menu  offscreen fix        
var wapoMainWindowWidth = $(window).width();

$('.sf-menu ul li').mouseover(function(){

    // checks if third level menu exist         
    var subMenuExist = $(this).find('.sub-menu').length;            
    if( subMenuExist > 0){
        var subMenuWidth = $(this).find('.sub-menu').width();
        var subMenuOffset = $(this).find('.sub-menu').parent().offset().left + subMenuWidth;

        // if sub menu is off screen, give new position
        if((subMenuOffset + subMenuWidth) > wapoMainWindowWidth){                  
            var newSubMenuPosition = subMenuWidth + 3;
            $(this).find('.sub-menu').css({
                left: -newSubMenuPosition,
                top: '0',
            });
        }
    }
 });
+3
ul ul ul ul ul { right: 100%; }

Thus, all subnavigations after submenu 4. will be located on the left.

Next step: reset this property after several UL, like this:

ul ul ul ul ul ul ul ul { right: auto; left: 100%; }

Try playing with him.

I never develop such a nested navigation, but this snippet may be useful in other situations.

Hope this helps.

+1
source

in your superfish.css change the left property of this class:

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           10em;
    top:            0;
}

make the left property negative as follows:

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           -12em;
    top:            0;
}
0
source

More articles:


All Articles