A Description of Horizontal Web Page Menus For Hyperlinks

Google+ Pinterest LinkedIn Tumblr +

A Description of Horizontal Web Page Menus for Hyperlinks
Commercial Horizontal Web Page Menus – Part 1

A web page, horizontal menu is a menu in which, the menu items are in a horizontal bar. This is an article series in which I describe the creation of a main menu with optional sub menus. The main menu is a horizontal bar and the sub menus are also horizontal bars. The menu items are hyperlinks. When you click a hyperlink, the browser takes you to another web page.

You need basic knowledge in HTML, CSS and JavaScript in order to understand this article series.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

User Requirements
– The menu items are text hyperlinks and are not underline initially.
– When the mouse pointer goes over a menu item, it becomes underlined, and its background color or image changes. If the menu item has sub menus, you see its sub menu (with menu items) in a horizontal bar just below it.
– There is a main menu (horizontal bar) that is always displayed. The menu items in the main menu or sub menus are evenly spaced.
– Clicking a menu item takes you to a different page.
– More than one sub menus can be opened leading to a set of menu rows.
– When the user clicks anywhere in the menu but not on a menu item, the menu bars disappear leaving only the main menu bar.

So each menu item in the main menu can lead to a tree of menu items since a sub menu can be opened from any menu item.

Technical Requirements
In this section, I give you one way of implementing the above user description.

Main Menu
– The main menu is contained in an HTML Table element. This table element has one row initially. The row has just one table cell.
– The cell of the above row has the main menu items.
– Each menu item is a hyperlink.
– Each menu item has an onmouseover and an onmouseout event.
– For a menu item with a sub menu, the onmouseover event calls a JavaScript function that produces the sub menu.
– Each opened tree of menu items has one root, which is a main menu item in the first row. Only one tree with one root can be opened at anytime.
– The menu items of the main menu or sub menus are separated by equal number of the space characters ( ).
– The hyperlink href value and A element content for each menu item form a string in a multi-Dimensional JavaScript Array. Even though we can say there are many trees of menu items, rooted from the main menu items, there is one multi-dimensional array, which has all the strings for all the hyperlinks of the menus.
– When a sub menu is needed, a row of one cell in the HTML table is created, to house the sub menu.
– The HTML table has an onclick event, whose function removes the table rows for the sub menus, leaving you only with the first (main menu) row. It would be nice to have an onmouseout event for the Table that will cause the rows to be removed. However, the onmouseout event behaves sometimes like an unmousemove event. This would lead to a complicated code. So I use the Table onclick event.

Sub Menus
– Each sub menu consists of menu items in the one cell of a row created.
– The sub menu items, like those of the main menu are separated by equal number of the space characters.
– The hyperlink href value and A element content for each menu item form a string in the single multi-Dimensional JavaScript Array. This multi-dimensional array is the one mentioned above, which also has the strings for the main menu.
– When a sub menu item is required, an additional row with one cell is created in the table and fed with menu items obtained from the multi-dimensional array.

Main Menu and Sub Menus
The main menu and sub menus are in one HTML Table. The main menu is in the first table row having one cell. Whenever a sub menu is needed, a row of one cell is created in this table to house the sub menu items. When the web page is loaded, only the main menu (in one row) is initially displayed. The main menu is not supposed to overlap any web page content.

With the description given so far, when a sub menu appears, the content of the web page below the main menu would shift downward, to make space for the added row. This is not what is required; any added row should overlap the web page region it has to occupy. How do you achieve this? You can achieve this by putting the Table in an HTML DIV element. The Table in the DIV element is given a CSS absolute position property with a high z-index. In this way, its added rows will overlap the web page region they were to occupy. Still, with this modification, the DIV element may collapse, and the main menu would overlap some web page content. To prevent the DIV element from collapsing, just type a single space character ( ) in it. From a practical point of view, the main menu would overlap the horizontal space (the height of) of this single space character and not any (useful) web page content.

CSS is used for the non-underlining and underlining of hyperlinks and the changing of their text colors.

Here is the description of the example we shall use in this series. It is simple. You have a main menu with 4 items. You have two levels of sub menus. Each sub menu has 4 items. The second and third item of the main menu, each produces a sub menu. The second and third item of each second sub menu produces a sub menu. Since there are only two levels of sub menus, you can have a maximum of three horizontal bars on the screen: the main menu and two sub menus. Any third level sub menu here, does not produce a sub menu, because it will not be design to have a menu item that can produce a sub menu.

Each menu item (hyperlink) has a small “repeating” background image that changes on mouse over, to another “repeating” background image, and then goes back to the original background image on mouse out.

Commercial Aspect
I am not selling the code of this article. It is free. I will give you a link to download it at the end of the series. You can modify the code and sell it to web designers. The main thing the web designer has to do is to feed the href value and link content for each menu item to a multidimensional array you will easily show him how to create; after learning from my blog and this series.

We have got a good description of horizontal web page menus. Let us stop here and continue in the next part of the series, with the details.


To arrive at any of the parts of this series, just type the corresponding title below in the Search Box of this page and click Search (use menu if available):

A Description of Horizontal Web Page Menus for Hyperlinks
A Multidimensional Array for Horizontal Web Page Menus
Code Explanation for Commercial Horizontal Web Page Menus
Commercial Aspects for Horizontal Web Page Menus


About Author

Leave A Reply