A Menu for All Browsers - Tutorial arrangement of this series
(Page 2 of 5 )
The first section of this series deals with the case where the background of a menu item is a color. The second section (very short) will deal with the case where the background is an image. Then we shall see how to design a menu where the main menu is vertical; it is more difficult to achieve this with the Simple Layout Approach. We summarize and conclude after that. In the last part we look at recommendations.
Concerning the case where the background of the cell is a color, I will first of all describe the layout, which is very important in this series; then I will explain the code. In this series, the code is very different from what you may have seen in the previous series, where I walked you through the Simple Layout Approach. The layout in this series is more involved, but still fairly simple.
The Example for this Series
The example we shall use here is the same as the one in the Simple Layout Approach, from the user’s perspective. When an ordinary user uses either design, he may not notice the difference. You have a main menu (horizontal) of five menu items. Sub menus can appear below it. In this example, there are five drop down menus, each corresponding to one of the main menu items. The second drop down menu can produce two sub menus. One of these sub menus can produce another sub menu. The last drop down menu can produce a sub menu on its left.
Well, there will be no drop down button. Each main menu item will respond to an onmouseover event to produce a drop down menu. When a mouse pointer goes over a main menu item, this produces a drop down menu. Some menu items in drop down menus have the ‘>’ character. When the mouse pointer goes over such a menu item, a sub menu is produced on the side of the drop down menu (this also applies to sub menus).
When the mouse pointer goes over any menu item (main menu item or the sub menu item), its background color changes from brown to firebrick. Note that I did not make the main menu item change color in the Simple Layout Approach series. When the mouse pointer goes away from the menu item, the brown color is returned.
The description is almost the same as we saw in the previous series, except for the absence of the drop down buttons. However, from a technical perspective, a lot is different.
Next: The secret of the elaborated layout approach >>
More HTML Articles
More By Chrysanthus Forcha
