1028 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 500 and 999 users
+1 more
ThemeBlvd says

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 :-) ?

105 posts
  • Exclusive Author
  • Bulgaria
  • Sold between 5 000 and 10 000 dollars
  • Bought between 100 and 499 items
  • Referred between 10 and 49 users
  • Has been a member for 4-5 years
DodoWeb says

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

1028 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 500 and 999 users
+1 more
ThemeBlvd says
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);    
    });

});
105 posts
  • Exclusive Author
  • Bulgaria
  • Sold between 5 000 and 10 000 dollars
  • Bought between 100 and 499 items
  • Referred between 10 and 49 users
  • Has been a member for 4-5 years
DodoWeb says

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

1028 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 500 and 999 users
+1 more
ThemeBlvd says
Well, I don’t think there’s a way to do it only with CSS .

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

by
by
by
by
by
by