Magic Menus

Another piece of unobtrusive javascript. I’ve been promising Ken, the webmaster of linux.ie a good look at this for a while.

Here is the demo. Works in (just testing it now…) IE7, Firefox, and Konqueror (although I see a tiny bug in the latter which I’ll have fixed before long). Its degradable, so should be fine as well in Links/Lynx, etc. I’m heading home now, so will work on it at home for Konqueror and Opera (haven’t tested that).

Basically, you just link to the script in your <head>, and it converts any <ul> trees that it finds into hierarchical menus – but only if the parent <ul> has a class name of either “magicmenuleft” or “magicmenutop”.

The code was originally based on work done by Mike Hall, but it’s been so worked over that I feel it’s safe to call this a different kettle of fish.

As usual, feel free to take this and work with it.

3 Comments.

  1. Initial tests:

    Some weird initial bugs on Opera that disappear on the second mouseover.
    Gives a javascript error on IE4
    Styles dont work properly on the horizontal menu in IE5

    Will test on a mac later.

    I use easymenu myself, fixed a couple of bugs for the author, but will give this some more testing later and may use it in the future.

    How about nested submenus?

  2. I’ve added a submenu to the first menu on each …menu…
    It looks like there is a further bug where parents are not hidden. Damnit – though I had this one in the bag.
    My tests at home showed perfect rendering by Opera and Konqueror (in KDE 3.4.2). Here in the office, the Konqueror is in KDE 3.3.1. There are a few minor nit-picky things there, but they seem related to the speed of the machine (550MHz).
    I admit I haven’t tested in IE4 😉 – I have a test machine with IE5, 4, and 3 installed, but don’t really spend much time on it. IE5, though – I’m pretty sure I’ve got working in the past, and have noticed its ignorance of simple CSS rendering. Nyeh – the thing works, and that’s what matters…

  3. Doesn’t work on IE on a mac, but thats most likely related to your addEvent function.

%d bloggers like this: