HTML

Choosing Sub Menus for a Common Browser Menu

In this part of the series, we discuss how the sub menus, including drop-down menus, are removed from the screen. We shall also see how the series will progress. This is the ninth part of a ten-part series covering the creation of a common browser menu.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 0

May 01, 2009

TABLE OF CONTENTS:

In your own project, you can make some changes to the menu. You can change the colors to suit the background of your web page. You can also make the menu items on the main menu (horizontal bar) respond to onmouseover events instead of onclick events of the drop down buttons. In this case, you do not need the drop down buttons; when the mouse pointer goes over a main menu item, you should see the corresponding drop down menu.

Width of a Sub Menu

In the design so far, all the sub menus have the same width. You may want the width of a sub menu to depend on the longest link in the column. Following the algorithm so far, it can be difficult to achieve different widths for the sub menus, since the same cell is used for SPAN elements (each having a link) of different levels of sub menu items, having different ancestors. In theory you can achieve this, but in practice, browsers may not handle the code you come up with. However, do not lose hope; I will give you some suggestions at the end of the series.

We are coming to the end of the series. I call the design approach of this series the Simple Layout Approach. There is another approach that I call the Elaborated Layout Approach. I will soon write another series based on that approach. A lot of what we have learned so far will be used there. The next series has the advantage of letting you easily give borders to menu items.

Before we end, we shall see how you can use images for the background of the cell of the menu item. We shall also see how we can add code segments, so that the above code can work with other browsers. We shall use Opera as an example of these other browsers. Recall that the code in this series works with Internet Explorer, Mozilla Firefox and Netscape. The code does not work well with Opera. It also does not work well with Safari.

Time to take a break. We continue 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.