ADxMenu

Drop-up menu

May 1, 2004 by Aleksandar Vacić 2 minute read

Due to popular request (hi xeon :), I have updated the examples with the drop-up version. This is useful if you want to place the menus in the page footer.

This is the only important part:

/* fix the position */

#menu li ul {

	bottom: 1.5em;

	left: 0;

}

#menu li li ul {

	bottom: 0;

	left: 100%;

}

1.5em is just an example value. You need to modify it according to menu make-up (as shown in the examples).

Good to have in mind is that usability script will not be much help here, as it checks for menu going below the viewport’s bottom, while here we need to check for going above the viewport’s top. I will make sure that future revision of the script deals with this situation. It’s not hard, I just need to find time to do it.

There is one more change, due to some wierdness in IE 5.0x on Windows. I had to use display instead of visibility because the latter creates huge problems in IE. Main menu is totally broken, probably because IE is acting like the submenus are not absolutely positioned at all. This way, wierdness is limited only when item is hovered.

Also, I gave the better explanation how to extend the styles to have more submenu levels, in the pure CSS menus post.