Using superfish menu to fly up instead of drop down?

Envato Authors Theme Authors
1

I’m playing with the jQuery superfish menu:

http://users.tpg.com.au/j_birch/plugins/superfish/#examples

Here’s a direct link to the CSS being used:

http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css

I’m trying to figure out how to adjust the default CSS to get the dropdown menus to open UP instead of DOWN, and I can’t figure out how to make it happen.

This is what I thought would work:

I changed this:

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}

To this:

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	bottom:			2.5em; /* match top ul list item height */
	z-index:		99;
}

but no dice…

I guess the correct way would be to adjust the “top” to be negative the height of the dropdown menu like this…

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	bottom:		-HEIGHT OF < UL >;
	z-index:		99;
}

…but I can’t know the heights, as the menus are dynamically created.

and ideas :slight_smile: ?

2

You can adjust it by JS. For example, with jQuery it will be something like this:

dd_height = $(“CSS selector for the dropdown box”).height();

$(“CSS selector for the button”).css(“top”, -height);

3
You can adjust it by JS. For example, with jQuery it will be something like this:

dd_height = $(“CSS selector for the dropdown box”).height();

$(“CSS selector for the button”).css(“top”, -height);

That’s essentially what I ended up doing. It would have been nice if I could have done it without adding javascript.

For anyone curious on how to do this, this is the code I used that’s working fine:

$(document).ready(function() {

	$('#header .menu li > ul').each(function() {
		thisHeight = $(this).height();
		$(this).css('top', -thisHeight-20);	
	});
		
});
4

Well, I don’t think there’s a way to do it only with CSS.

5
Well, I don't think there's a way to do it only with CSS.

Yeah, too bad… but thanks for your help, vinid!