There are two states of a sub menu item generally. In the code we have been talking about so far, when a menu item appears, it is brown; when the mouse pointer goes over it, it is firebrick. This is done by changing the background color of the table cell of the sub menu item. In this part of the series I show you how you can use two images instead of two background colors to indicate these two states of a sub menu item. This is the final part of a ten-part series on building a common menu browser.
Finishing Touches for a Common Browser Menu - The nuance explained (Page 4 of 5 )
The first if-condition checks to see if the browser is Internet Explorer. If it is, one (or more) of the statements we have seen for Internet Explorer, Mozilla Firefox and Netscape is written. The next if-condition tests to see if it is Opera. If it is, a statement (or more) for Opera is written.
The next if-condition tests to see if it is Netscape. If it is, a statement (or more) for Netscape is written; this statement should be one of the statements we have seen for Internet Explorer, Mozilla Firefox and Netscape. Next you have an ‘else’ (the default if condition), and the code will alert the user that the menu may not work with his browser. In this block, you put the statement that works for Internet Explorer, Mozilla Firefox and Netscape.
The browsers I have mentioned so far (for testing our code) are Internet Explorer, Mozilla Firefox, Netscape, Opera and Safari. The code (the first two you downloaded) I give you in this series works very well for Internet Explorer, Mozilla Firefox and Netscape without any code segment specialized for any of the three browsers.
However, the code cannot work without modification for Opera and Safari; I used Opera to illustrate this exception. There are two else-if-else long statements above. The first one is the normal way to modify the code so that it works with Opera or Safari or any other browser.
The second "if else if" statement is the way that actually works with these browsers (the five or more) as they are today. There is a nuance with this second statement. The “navigator.appName” expression happens to return "Netscape" for Mozilla Firefox, Safari and Netscape itself. As you can see we cannot use the normal "if else if" statement mentioned before. As you have also seen, the code we write for this series works with Internet Explorer, Mozilla Firefox and Netscape proper. It does not work with Safari, even though the expression returns "Netscape" for Safari.
One way to solve this problem is to use the first "if else if" statement and let the test for the if-condition be as follows: use an expression related to the statement you want to execute in the if-condition. Let the expression return true or some value that you know. If this is the case, then the statement will be executed for that browser. For example, in the case of Opera, you can test for the present color of the cell background; if the color was brown and the return value is the hexadecimal number for brown (#a52a2a with letters in lower case), then you know that the statement will work with Opera.
If you do everything as I recommend in this series, your code should work for Internet Explorer and Mozilla Firefox. If you have some patience, you can modify the code to work with Opera and Safari. At the end of the series I will give some proposals that are better than the ones above. All the browsers, we talk about here, should be browsers that were published after 2003.