The Blog

ADxMenu v4.10

By Aleksandar On Fri, Jan 5th, 2007 In ADxMenu With 22 Comments Permanent Link to ADxMenu v4.10

Permalink

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:

li:hover
li:hover>a
li:hover>ul

Script changes

It’s so simple.
I’m using script for IE6, in which I’m already using this replication of li:hover:

PLAIN TEXT

JavaScript:



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:

PLAIN TEXT

JavaScript:



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:

PLAIN TEXT

CSS:



li { position:static; }


li:hover { position:relative; }

I then tried this:

PLAIN TEXT

CSS:



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.

Banca

Beautiful and functional currency converter, supports just about any currency in the world.

Go Couch to 5k

The most popular starter running program in beautiful feature-rich app (GPS tracking, charts, detailed history etc)

Quickie to do

The fastest short-term task-list / check-list app on the App Store. Really.

Guerrilla Cardio

The most challenging high-impulse interval training in the world.

Run Mate

A versatile running coach app, with unlimited number of running programs. Perfect for casual runners.

22 Comments

Feel free to chime in, looking forward to it. Leave a Comment

matthijs says:

Sat, Jan 6th, 2007 at 18:19 ·

Looks very good Aleksandar. Certainly the fact that there’s a delay in the collapsing and a margin area which you can hover, which makes the menu a lot easier to use with the mouse. I can imagine that that’s a huge help for those with lower motor skills.
Luke Mullin says:

Tue, Jan 9th, 2007 at 22:56 ·

I know its not the most supported browser, but today a client noticed that their menu (which was built with adxmenu) doesn’t work in IE 5.2 for the Mac. Is this a known issue or did I just screw something up?
Aleksandar says:

Tue, Jan 9th, 2007 at 23:37 ·

Luke, IE/Mac does not suports li:hover, thus it would require a script as well. I believe that ADxMenu.js can be changed a bit and it will work on IE/Mac, but I see little point (at least for me). I always try to use normal links (not # or javascript:void(0) or similar) on each menu item, thus I have a backup for older browsers.
What you need to do is provide a good rendering of the main item and good intra-section navigation. I do that and usually have no problems with clients. :)
Richard Tammar says:

Fri, Feb 9th, 2007 at 23:37 ·

I noticed an odd effect in Firefox 2; each top-level menu item after the first displays as grey with no hover state. Any ideas?
Richard Tammar says:

Fri, Feb 9th, 2007 at 23:43 ·

sorry — I just worked it out — an unintended consequence of the “special colouring” rule — please ignore me!
Aaron says:

Wed, Mar 14th, 2007 at 17:25 ·

I have tried implenting the menu but have an issue. our asp pages render this before anything else on the page including the doc type and it seems to make the drop downs not work properly. I am guessing it is keeping the ADxMenu.js from executing. I tried downloading the page and removing that and it works fine but when the asp page is generated with the it breaks it.

I dont have control over having the asp pages not add the to every page. Any ideas why this does not work?

here is an example start of the example page with the code before the doctype.

ADxMenu (www.aplus.co.yu)

If you put this on you example page you will see it breaks the menu and does not allow for the drop downs to work.

Thanks soooo much for the help!!! :)
Aaron says:

Wed, Mar 14th, 2007 at 19:56 ·

it also seems to not work if you remove the doctype or change the doctype.
Aaron says:

Wed, Mar 14th, 2007 at 22:25 ·

oops…the code got stripped.

Here is is.
Aaron says:

Wed, Mar 14th, 2007 at 22:26 ·

ok lets try again.

<!–7.223:DEBUG INFO–>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head profile=“http://gmpg.org/xfn/11″>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
Aleksandar says:

Thu, Mar 15th, 2007 at 14:58 ·

Aaron, the first premise of ADxMenu is standard-compliant web page. Thus, you need to place the elements where they belong, inside HEAD and/or BODY. I have never tried anything else, thus can’t answer how will things work — thus ADxMenu might or might not work properly.

Further, if IE6 encounters anything above DOCTYPE (even HTML comment) it will use quirks mode, not standards mode. You will need to tweak the .asp pages, if possible. If not, then I guess ADxMenu is not an option for you.
Aaron says:

Thu, Mar 15th, 2007 at 18:37 ·

Thanks for the info! Yeah i have tried to tell them here and am with you on that. I wish i had control of the asp pages to change them. :)

Thanks again and love the script!!!!
Aaron says:

Tue, Mar 20th, 2007 at 16:35 ·

I was wondering if it is possible to break out the styles into seperate style sheets rather than having them on the page.

If so how would you accomplish this with the if then statements for the other browser support?

Thanks!!
Aaron says:

Tue, Mar 20th, 2007 at 17:41 ·

Is it possible to make the menu dropdown items transparent?

I have applied this code to the ul

.menu ul {
width: 11em;
filter:alpha(opacity=70);
–moz-opacity: 0.7;
opacity: 0.7;
}

It works on the first drop down item but then seems to cut the second drop down menu item in half and does not display any other drop down items below the second drop down.

Any ideas on how to make this work?

Thanks so much for the help!!! :)
Aleksandar says:

Tue, Mar 20th, 2007 at 23:00 ·

Yes, of course. I use inline styles only for examples. Filter is a bad way to go, menus do not work when it is used — better use transparent .gif or .png with desired opacity as background image.
Aaron says:

Thu, Mar 22nd, 2007 at 22:08 ·

on the menu is there anyway to show that a menu item has menu items under it? Maybe apply a different style to the parent item?
Aaron says:

Fri, Mar 23rd, 2007 at 18:41 ·

what i mean by showings is it it had a style associated with it you could put a background image of an arrow or something showing it has sub menus or color it differently. :)
Randa Clay says:

Wed, Apr 4th, 2007 at 3:33 ·

I just wanted to say thank you for a wonderful and well-documented menu system. It works perfectly for the site I’m developing right now. I looked high and low for something like this, and you provided the perfect solution. Thank you!
Paolo Ferrari says:

Fri, Apr 13th, 2007 at 16:53 ·

Hi Aleksandar,
I have a problem.
I’m cutomizing your wonderful menu.
I need to use two in the same page: the menu the “top to bottom” one and the “left to right” one.
My problem is that with IE 7 i don’t have any problem, but with IE6 the “left to right” menu doesn’t work (doesn’t work the over menu).
I have changed only the name of the class, from “adxm menu” to “vrt_menu” because i need two classes to use two menu in the same page.

I can’t understand becuase It doesn’t work properly with IE6 and works good with IE 7.

Can you help me?

Thanks a lot for your time!

Paolo
Aleksandar says:

Fri, Apr 13th, 2007 at 22:24 ·

Paolo, “adxm” class must exists, on each menu. I understand you have removed it. On the second menu use “adxm vrt_menu” and it will work (if other elements are ok).
Paolo Ferrari says:

Mon, Apr 16th, 2007 at 9:10 ·

Ok Aleksandar, thank you very much. I’ll try. Thx for your time again.

Paolo
TJ says:

Fri, Oct 5th, 2007 at 17:24 ·

I am working the adx menu into a website and am having pretty substantial problems with alignment of submenu’s in ie7. I am using a mac and that part ofthe problem, I can;t test in ie all the time.

The menu looks great in FireFox (adshapiro.com/tset) But in ie the submenu’s are heavily overlapping.

Any thoughts?

tj
Steve Powell says:

Fri, Nov 23rd, 2007 at 5:46 ·

Try the link I posted. In Firefox similar to the example Horizontal Top Down, Home & the 1^st child of Club & Local don’t change color on hover but the 1^st child of Our Dances does. How do I fix it so every hover changes color?

Also, it is now not working at all in IE7