Question

I am looking for a way to build a dropup menu. Basically, I have a website that has different buttons at the bottom and some of them should have dropup menus so that a few buttons apper above it on mouseover.

Oh, and I’d like to have a solution that works without big libraries and maybe even without javascript (but that’s just because it’s cleaner, a solution with javascript would also work).

Edit: Here’s some code:

HTML:

<div class="toolbarElement" id="toolbarViewUsers">
    <img src="images/usericon.png" />
    List users
</div>
<div class="toolbarElement" id="toolbarSettings">
    <img src="images/settings.png" />
    Settings
</div>
<div class="toolbarElement" id="toolbarLogout">
    <img src="images/logout.png" />
    Logout
</div>

CSS:

.toolbarElement img {
 display: block;
}

.toolbarElement {
 float: left;
 text-align: center;
 margin-left: 3px;
 margin-right: 3px;
}

This is how it looks:

Edit 2: Now I tried this, but I still don’t know how to place the submenu above the toolbarElement:

CSS:

.toolbarElement {
 float: left;
 text-align: center;
 margin-left: 3px;
 margin-right: 3px;
 position: relative;
}

.submenu {
 position: absolute;
 bottom: 0px;
 left: 0px;
}

HTML:

<div class="toolbarElement" id="toolbarSettings">
 <img src="images/settings.png" />
 Settings
 <div class="submenu">
  Hallo
 </div>
</div>

Answer 1

Here is what I think is a good example:

jQuery multi-tiered drop-up menu

Watch demo here.

BTW just a warning the demo has de drop up way down in the left corner, call me an idiot but i refreshed 5 times before i saw it 🙂

Good luck