Couple of months ago, we started a new project in the company I work for. Of course, the project needs a menu to navigate the system. This is something of the basics that you don't think of and mandatory to exist.
I was assigned to look for a menu. Well, I did and found couple of menus that really meets our requirements and the client's expectations. Well, almost.
Option number one was struts-menu. Which seemed to be the best option as we were already using struts in the project. So, I gave it a try. It does work just fine except for a very small thing. You have to do a click on the main menu items to get the menu displayed. No problem with that. But most of the menus now work with just mouse-over and mouse-out. Why the need for a click to pop up the menu and another click to make it go away?
The other thing we noticed at that time, is that the latest update was 2004 (I just double-checked now. This is not the case. The case is we were using older version, so of course, 2004 was the release date of that version).
Note: We are using Java EE 1.3 container. So, we had to use struts 1.3.7
Any way.
The other option was to go with a ready made java script menu. We found the Tigra menu. That was a very good option actually. The menu is fantastic actually.
But with just simple four problems (:D):
1- It's java script code is scrambled (I just discovered today that we were using the compressed version of the menu.js file).
2- The menu items are not displayed over a combo box in IE 6 only!!!!!! (IE 7 and FireFox are displaying it right). And you cannot overcome this issue by setting the z-index to a higher value. They say that this issue is fixed in the golden version. But the fix they made, I really think is not a fix, it's just a work around. They hide the form elements that gets displayed under the menu....!!!!??! (At least that's what I understood, I might have got that wrong).
3- It is using absolute position, which leads to having rendering issues specially with window resize.
4- Barely can be modified for Arabic usage (right to left display).
So, actually, I had enough of this menu issue. We have been trying different menus for the last couple of months now and still have not reached a solution of a menu that works without any cross-browsers issues. For each menu, we have different issue either for all browsers or for a specific browser.
So, I decided to give it a try. All menus are just doing some onmouseover and onmouseout java script calls. So why not making it simple HTML nested tables?
I tried it and it worked for all browsers displaying the same. And you can very easily apply what ever style sheet you want on each menu item seperatly. I made it in just in one day with its custom tag that loads its items from an external XML file. And it really renders just fine on all browsers.
Well that's what I thought till last Thursday...!!!!
It cannot display its items over combo boxes...!!!!
I'm really disappointed. :( :'(
1 comment:
After searching the net I found the following:
IE 6 is treating the select object as windowless element.
It has been fixed in IE 7.
Starting from IE 5.5, IFrame is a windowed element.
Any way, the solution for this issue turned out to be very simple. Just put the menu items in an IFrame element with z-index higher than 1.
check these links:
http://msdn2.microsoft.com/en-us/library/ms537627.aspx
http://msdn2.microsoft.com/en-us/library/ms535167.aspx
Another solution, actually it's a workaround, is to have the select element get hidden using javascript till the menu is removed and redisplay the select item.
Post a Comment