PDA

View Full Version : CSS flyout menu flying right out of my browser


mazzi
03-31-2005, 11:37 PM
I am a webmaster for a Yahoo store that sells medical equipment. I have this crazy boss who thinks that every possible category of medical equipment should be listed in the side navigation (http://www.medicalresourceusa.com/). Despite numerous attempts to convince him that this really, really sucks, he and the sales team won't budge.

(Oh, and I also recently discovered that my CSS topnav is totally borked in IE, but that's another issue altogether.)

As a compromise, I am now trying to organize this mess into a flyout menu. I managed to piece together a Frankenstein version of this CSS menu (http://www.alistapart.com/articles/horizdropdowns/), which uses a wee bit of JavaScript to patch over IE bugs. With minimal CSS skills and no experience with JavaScript whatsoever, I finally figured out how to get this bad boy (http://www.medicalresourceusa.com/flynav.html) working. All of the CSS and JavaScript is in the <HEAD> tag for your viewing pleasure.

Problem is, the submenus always fly downwards from the main menu. So when you mouse over the links near the bottom of the menu, they fly out of the bottom of the browser window, causing a scrollbar to appear on the right. Is it possible to get the submenus to recognize when they don't have enough room and fly upwards when necessary?

brothercake
03-31-2005, 11:48 PM
Yeah it is, but I won't pretend the code is simple - it's pretty complex to work out all the positions and dimensions, and compensate for all the browser bugs. So if you don't mind getting your hands dirty, I'll go into it with you.

Or would you be interested in an off-the-shelf commercial product? I have a DHTML menu (http://www.udm4.com/) that has the capability you want, and it doesn't sacrifice accessibility or force you to put tag soup in your pages :)

mazzi
04-01-2005, 06:13 PM
Ack! I thought that might be the case. Thanks for the quick response, though. :)