Welcome to WebmasterWorld Guest from 54.80.87.250

Forum Moderators: not2easy

Message Too Old, No Replies

CSS drop "up" menu

Dropdown menu in footer to drop "up"

     
7:38 pm on Sep 15, 2009 (gmt 0)

New User

5+ Year Member

joined:Aug 26, 2009
posts: 9
votes: 0


Hi all,

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]

11:39 pm on Sept 15, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


It shouldn't be that hard to do with just CSS. Just think in reverse. Most drop downs are put in <ul> which are offset by margin/padding or with positioning. Just code it up (so to speak), with negative declarations.
12:59 am on Sept 16, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Yes, but with a drop down you set top and left and allow right and bottom to fall where they may. menus are generally positioned from the top left, since those properties are easily accessed.

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

4:44 am on Sept 16, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


If you nest your submenu items one in the previous one instead of a list, you could use absolute positioning to put them a line higher each time, putting them in reverse order. But it's a big hit on the html to get it that way.

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 ...

5:02 am on Sept 16, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Maybe I need to explain the code above a bit more:

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.

5:28 am on Sept 16, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Tested it in Safari: works as expected
In opera 9.somethig: Opera gets confused and creates a scrollbar once you hover the menu ... upgrading to opera 10.* ...
Might take a while from this hotel's network to get that completed.
6:36 am on Sept 16, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Actually the while mess I made above isn't needed at all, you can get it to work with a nested list just as well:


<!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.

3:02 pm on Sept 18, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


**All hail** awards a mil brownie points anyway!

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