dropup menus in CSS?
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>
Answers
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