Forum Moderators: not2easy
I am looking for a drop-up menu to place in a footer at the bottom of my webpage. There are plenty of drop DOWN menus, but I don't know how to modify the code to position the sub-elements to appear ABOVE the parent items.
Google isn't helping but that's probably because I don't know the proper terms to use!
I'm starting out with something generated and modifying it but I don't know how...
It doesn't have to be CSS-only, but it would be nice. Ajax is fine too...
Anybody have any tips or links that describe what I'm looking for?
[edited by: swa66 at 3:52 am (utc) on Sep. 16, 2009]
[edit reason] Link removal [/edit]
It should be very similar to drop-down menus, it's just that your top left is positioned higher. To get the top left for positioning a drop-up menu, you'll have to calculate the total height of the menu container. Zero out all margins/paddings, or specifically assign them. Unlike a drop-down menu, if you add items you'll have to modify the CSS to "move" the top left accordingly.
If you manage to get it working, user changes in text size might break the layout.
Maybe that's why there's no glut of drop-up menus like there are for drop downs. :-) Great puzzle though, it will be interesting to see if someone has a solid solution (+ 1 million brownie points for making it work in IE 6!)
To give you an idea:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.menu {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.menu li {
position: relative;
display: inline-block;
height: 1.2em;
}
.menu li div {
position: absolute;
bottom: 1.2em;
height: 1.2em;
display: none;
left: 0;
white-space:nowrap;
}
.menu li:hover div {
display: block;
}
</style>
</head>
<body>
<p>content goes here, could use a wrapper and some padding to clear the menu</p>
<ul class="menu">
<li>item 1</li>
<li>item 2
<div>
<div>
<div>
subitem 1
</div>
subitem 2
</div>
subitem 3
</div>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
The height is to be able to hover onto the submenu without interruption.
Only tested in FF3.5 so far.
If anybody has a better idea for the nested divs in the html ...
The settings on html and body are to make sure the body at least fills all of the viewport, and that body has position so I can position a menu at its bottom.
In real use I'd add a wrapper around the content (but not the menu!) and give it like a 2em padding on its bottom to make sure there is unused space in the body that the menu can sit on top of.
The menu ( the <ul> ) is positioned with it's bottom on the bottom of the body, given the full width and it centers its inline content (upping the ante a bit I guess)
The items in the menu are inline blocks (to be able to specify the height), and have position (so the child divs can use them as reference for their absolute positioning)
The height of 1.2em is the line height in most browsers (opera is the exception there with less by default, but it'll work regardless of that, any line pith you chose will work as long as you match the height of the elements and the offset from the bottom so there are no gaps (gaps will cause you to stop hovering)
The divs are positioned relative to their closets parent that has position (either one of these divs, or the <li>, they all have position)
The nowrap is to make sure it stays on one line (having two lines would make them overlapping)
The bottom pushes them up the height of one line each stacking the outer one just above the li, the next one just above that etc. So the outermost is the lowest, the innermost is the highest in the submenu.
What I don't like is the divitis, but I need nested elements to pull of the positioning.
Otherwise it's done without knowing the height of the submenus.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.menu {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.menu>li {
position: relative;
display: inline-block;
height: 1.2em;
text-align: left;
}
.menu ul {
position: absolute;
bottom: 1.2em;
display: none;
left: 0;
list-style:none;
}
.menu li:hover ul {
white-space: nowrap;
}
.menu li:hover ul {
display: block;
}
</style>
</head>
<body>
<p>content goes here, could use a wrapper and some padding to clear the menu</p>
<ul class="menu">
<li>item 1</li>
<li>item 2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
Will need some help in IE, esp. IE6 as usual.
Seems to have a weirdness in FF though, a blinking effect on the tab itself, and a blinking cursor over the menu item. But it works!
Edit: weird, now it's gone away, might be a FF bug (currently 3.5.30729 . . . today . . . .)
