Layout: Dynamic menus with CSS

started by Skoosacker on Jan 5, 2004 — RSS Feed

Skoosacker Skoosacker
Posts: 1

I would like to make a dynamic menu using CSS . Idealy the menu headings will expand when click on and show the sub menus beneth. Do I have to have a javascript to make this part happen?

Mattman Mattman
Posts: 9

Check this out - http://www.nic.fi/~tapio1/Teaching/DynamicMenus.php3

Matt

Baxter Baxter
Posts: 157

Looks awful hard trying to wade through that to me.

Short answer is that IE doesn't support hover properly, so if you don't care about IE, you can do it in pure CSS. If you do care about IE (and unfortunately you probably have to), then you need some javascript. Run a google for "suckerfish dropdown" and you'll find a relatively easy and straightforward way to do it with as little javascript as possible.

Jdenny Jdenny
Posts: 65

It would not be inconceivible to make a small JavaScript that adds the :hover fucntionality to IE

It would have to read the document style sheets to find where :hover is used and is not on an <a> element.
Then traverse the document tree adding onmouseover="....." to the relevant elements, (where ..... is the css properties found in the style sheets for each case of :hover found).

Would need a bit of effort and patients, but could be re-used a trillion times, so I might make this script if anyone might find it usefull??

Baxter Baxter
Posts: 157

Don't bother reinventing the wheel. The suckerfish solution is simple and effective, even on IE.

Jdenny Jdenny
Posts: 65

Yes I was pretty much suggesting the suckerfish system but without any javascript inside the menu, it can go in an external script file, and linked to using conditional comments (so only IE see's it).

In addition it would allow you to use :hover on any element in IE.

Baxter Baxter
Posts: 157

Now that IS clever.

Now if you can just make IE understand position:fixed in some simple, usable way.

Jdenny Jdenny
Posts: 65

hmmmm the current way to emmulate poistion fixed is to add a JavaScript that detects when the document is scrolled, and repositions the layer relative to the window when the scrolling has stopped.

This works of if JavaSCript is enabled, and a script could be made to automatically add it when IE is the browser, like a fix or a patch, in the same way as the :hover fix I was talking about.

Also I think there maybe a CSS workaraound:
make the scrolling part of the page overflow: auto; and put the position: fixed; parts outside that scrolling part.
(Don't actually put the poistion: fixed; code on them)

Jdenny Jdenny
Posts: 65

I done an alternative CSS+DynamicProperties (IE only) solution to make IE do position fixed, and no extra code needed on the element itself!

it's all int eh CSS, but scripts probably still have to be enabled in the browser.

IE5+ I think.

see the other thread:
http://www.wpdfd.com/cgi-bin/yabb/YaBB.pl?board=css;action=display;num=1076965568

You must login to reply