CODEWITHSUNDEEP
jquerydrop-down-menusuperfish
hungneox
hungneox

Reputation: 9829

How to make superfish menu open backward when there is not enough space?

How to make superfish menu open backward? I embedded a supperfish menu to my facebook application on fanpage, there is not enough space for the menu expand fully because it runs in iframe. How can I solve this issue by using superfis, or any other jquery menu plugin are also fine.

Thank you.

The current situation The current situation

The expected result The expected result

@Updated: This is an user-defined menu, and it has no limit of menu level.

Upvotes: 5

Views: 3220

Answers (4)

sadaf
sadaf

Reputation: 739

I know this question is very old but just for the reference, this is how I fixed the said issue

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': ''});
                    }
                }
            }
        });
 });

Upvotes: 5

Mohd Sakib
Mohd Sakib

Reputation: 471

I have written this script to fix. Now menu opens on left instead of right if there is no enough room. 

// 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',
            });
        }
    }
 });

Upvotes: 3

Bonita
Bonita

Reputation: 1

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 like this:

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

Upvotes: 0

doptrois
doptrois

Reputation: 1570

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

This way, all subnavigations after the 4. submenu will be positioned to the left side.

The next step is, to reset this property after a few UL's like this:

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

Try to play with it.

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

Hope this helps.

Upvotes: 1

Related Questions