In this seventh part of a nine-part series on building a menu that works in all browsers, we complete the discussion of the JavaScript functions. We go on to see how we can use background images for menu items instead of background colors. We shall start winding up the series at the end of this part.
Background Images for a Menu for All Browsers - Review of the Project (Page 4 of 4 )
The aim of this series is to come up with a menu code that can be used for all browsers, without any code segment specialized for a particular browser. We came up with one, but it could not work with all browsers. It satisfies most users, but not all. It works with Internet Explorer, Mozilla Firefox and Netscape. These browsers are used by the majority of users. That was achieved in the first series.
We have just come up with code which works with more browsers. It works with Internet Explorer, Mozilla Firefox, Netscape, Opera and Safari. The non-image code had the if-statement with bits for different browsers. This if-statement for the image code does not have these bits.
So the image code practically works with all browsers. Well, to be precise, it works with Internet Explorer, Mozilla Firefox, Netscape, Opera and Safari without any code segment really specialized for any of these browsers.
However, there is a small problem with Opera and Safari. With these two browsers, when you click on the BODY, outside the menu, the drop down and sub menus go off only if the mouse pointer fell on an element outside the menu. This is not a big deal, since a normal web page will have elements all over the BODY.
As you can see, we can say that we have achieved our aim. But a small bit is still left. We have not yet talked about a vertical main menu. We have talked about a horizontal main menu all along, but not a vertical main menu.
We have one more part in the series before the last part. In the next part, we shall see how to design a menu such that the main menu is vertical. It can be very difficult to do this using the technology of the previous series. It is easy to use the technology of this series to achieve this. A lot will still depend on the layout (arrangement) of the tables.
I hope you have appreciated everything so far. We'll rendezvous in the next part.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
More Top jQuery Plugins for Menus
