Aleksandar • Vacić

iOS bits and pieces

No spans. IE z-index thingie fixed.

At the original post for AD xMenu, I stated that main UL element must have position:relative. This created simplest possible solution, as it defined new coordinate system for submenus (which are absolutely positioned) and allowed me to use simple xLeft and xTop.

What I wasn’t aware of is that position:relative in IE also creates another “dimension” for z-index. After 5 days of trying this and that (I falsely accused floats as the source of problem), a good weekend spent with a girlfriend probably relaxed me enough to try something different and find a solution.

So now, ADxMenu 1.4 has a mandatory rule that you should not make your main list relatively positioned. This now means that submenu positions are calculated using xPageX and xPageY, which took few hours of testing to make sure it doesn’t break under any (yeah, right) circumstances.

Another improvement is that I removed all spans inside of A elements, which means we now have beautyful, simple unordered list of links.

Multiple, synchronous, onload functions

There’s not a single serious web site I did, where I haven’t combined two or more scripts. Calendars, DHTML layers, cookies…they all have one thing in common - they want to grab window.onload for them self.

I usually dealt with that by changing the onload function for last loaded script. This was a pain when for some reason I needed to change the loading order.

When I got tired of it, I wrote a custom script, that’s loaded before all others, and gathers all of them into one piece.

Revised for versatility

I implemented AD xMenu on a few sites I was working on and realized that Hider feature could be usefull for any layer on the page, not just menu ones.

Therefore, I have moved the Hider feature to separate script.

I also extracted X functions from the original script - menu script uses almost dozen of them, and X lib will probably be used for some other DHTML scripts.

There are other improvements too…

DHTML menu using semantic markup

I’m so hooked on CSS-based pages, that it hurts. It’s such a great thing to see how one small feature can make wonders. I.e. CSS float property allows extremely flexible layouts - page will accomodate to the device you are using.

Another CSS miracle is the display:inline + list-style-type:none combo. Simple, understandable UL list can be tweaked to produce magnificent things. There’s a great deal of fantastic examples around the web: bread crumbs, vertical and horizontal menus…with one small things that shortly comes to mind - these are all rather simple examples.

I needed a replacement for the old web-developer favourite - multi-level menu. Over the years, it was created in various ways, using tables, divs, NN4 layers, with inexhaustible charade of browser tweaks.

These were my goals:

  • support CSS-compatible browsers (IE5+, Mozilla, etc)

  • use semantic markup (UL lists) - 4.0 browsers and other oldies will see the simple nested lists thus having all the menu items accessible

  • make it feature rich as possible (i.e. menu items should have icons), just to quite-up all those you-can-do-it-with-tables people

Ideal solution would be to avoid Javascript at all. That is possible… if you have the privilege to ignore 99% of Internet surfers. Internet Explorer does not support those. …(blues moment)… So, let’s dive into real world, as it exists today.