1029 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 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
  • Has referred 10+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
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);

1029 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 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
  • Has referred 10+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
DodoWeb says

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

1029 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 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!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by