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

Question

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 expected result

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

Some users are going to be mad at you if you define so many levels in your menus. — Denys Séguret, Jun 11 '12 at 07:56
@dop-trois It's just
menu, similar to the sample code of Superfish, but it runs in a iframe (Facebook) — hungneox, Jun 11 '12 at 08:04
I feel for you. Your users asking for unlimited flexibility is not appropriate. I would strongly urge you to agree with them that only 3 levels is allowed. What happens when your top level menu starts further to the right, or the names of some menus are very long, or the browser font size is larger than expected (e.g. visually impaired)? — Brad, Jun 11 '12 at 08:13
Consider the case when a user accidentally exits with the mouse pointer the active area and the menu closes itsef.. This possibility increases with each level: 5 sublevels can be navigational hell, even without backwards opening — Lucius, Jun 11 '12 at 08:34

score 5 · Answer 1 · edited Jun 29 '17 at 15:30

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

score 3 · Answer 2 · answered Jul 10 '13 at 13:06

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

doptrois · Answer 3 · 2012-06-12T22:26:09.980

1

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.

edited Jun 12 '12 at 22:26

answered Jun 11 '12 at 08:03

doptrois

1,560
11
10

score 0 · Answer 4 · edited Jul 08 '12 at 18:04

0

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;
}

edited Jul 08 '12 at 18:04

highlycaffeinated

19,729
9
60
91

answered Jul 08 '12 at 08:01

Bonita

1

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

4 Answers4