ADxMenu

ADxMenu v4.10

Jan 5, 2007 by Aleksandar Vacić 2 minute read

After finishing this update, I had yet another moment of how in the hell I didn’t figured this before. You know the feeling - you struggle with certain code for weeks or months, and then after you surrender to the reality and code the “just work, bitch” parts, you realize the simple solution was waiting just around the corner of your mind.

With several simple lines in the script, I can now use much simpler IE6-only CSS. Menus now work with any number of levels, without the need to update the ugly .menu .adxmhover ul, .menu .adxmhover .adxmhover ul, .menu .adxmhover .adxmhover .adxmhover ul.... rules.

Even better, you now have - in IE6 - direct (not simulated) replacements for the following selectors:

Script changes

It’s so simple.

I’m using script for IE6, in which I’m already using this replication of li:hover:



oLI.onmouseenter = function() {

	this.className += " adxmhover";

...

};

which is then used in IE6-only styles as li.adxmhover. Well, why not add more replacements? With this:



oLI.UL = oLI.getElementsByTagName("ul")[0];

oLI.A = oLI.getElementsByTagName("a")[0];

oLI.onmouseenter = function() {

...

	this.UL.className += " adxmhoverUL";

	this.A.className += " adxmhoverA";

};

I can replace li:hover>a with a.adxmhoverA and li:hover>ul with ul.adxmhoverUL.

No need to simulate anything, simply repeat the style rules in IE6-only part using replacement class selectors and…that’s it. You can of course update the script and add replacements for other advanced selectors, but this is basically all that I ever needed in menu styling.

CSS changes

The whole thing started with IE7 problems with display property. I recoded CSS to use visibility instead, but then Safari went scrollbars-crazy - it was due to this:



li { position:static; }

li:hover { position:relative; }

I then tried this:



li { position:relative; z-index: 5; }

li:hover { z-index: 10000; }

but IE7 ignored z-index change. Now really on the end of my nerves, I coded horrible positioning trickery (horizontal bottom-top variant was the worst) to minimize all problems. Luckily, good man David pin-pointed solution for IE7’s li:hover issue.

At this point, I was so happy :) that it’s no wonder ideas sparked all over the place and dust was off the mind corner where replacement class selectors peacefully nap.

Wrap up

Instructions page is updated, Troubleshooting is a lot shorter and 4 basic examples are updated to latest code.