|
For a menu page, there will be cases that a visitor has turned off Javascript in his browser, or is using a browser not supported by the menu script, and then all your fancy menus are gone and the visitor is left with minimum direction on how to surf your web site.
If that's the case, you can layout the pages as if you won't use a menu system, and you set up link sections in pages, then you can either apply the menus to overlap those normal link sections, or just put some triggers in those links to pop up the menus.
To demonstrate these two workarounds, we've set up two menus here, the menu bar on page top and the drop-down menu on the left side.
At the first glance, they seem to have the same menu content: 5 options in top-menu and 3 of them have sub-menus. In fact, we have 4 menu instances: one on the left and three under the menu bar, and the menu bar is just some normal links.
Let's look at the menu on the left first. This menu is exactly overlapping the underneath link section. You can [click here] repeatly to move the menu aside to see what I mean, and [click here] to move it back.
To set up the menu overlapping, I used a table to hold the link section, specified the width, cellspacing and cellpadding for the table, and accordingly specified the same width (item width plus border size and padding), border size (to counter the table cellspacing) and padding (to counter the table cellpadding) for the menu. I also use the same contents for both the text in the link section and item text in the menu (say, both have a leading " "), then applied the same CSS style to the text in the link section and the item text in the menu. Finally I assigned an ID to the table and used it as the place holder for the menu (relative positioning).
Of course, if you use images for link section, it would be easier to control the size of the link section and the menu.
As to the menu bar. I first set up a horizontal bar for the top options and the separators within a table, and assigned IDs to the three separator cells that are preceeding the options which would have sub-menus. Then I defined three menu contents, which would have the same contents as the sub-menus in the left side menu, built three menu instances and positioned them with the IDs I set for the separator cells. Finally, I set up some triggers in the options to control the menus:
<td><a href="url"
onmouseover="closeMenu()">Home</a> </td>
<td id="toolBar">| </td>
<td><a href="url"
onmouseover="openMenu('Tool')"
onmouseout="closeMenu()">Tool Scripts</a> </td>
<td id="gameBar">| </td>
<td><a href="url"
onmouseover="openMenu('Game')"
onmouseout="closeMenu()">Game Scripts</a> </td>
<td id="forumBar">| </td>
<td><a href="url"
onmouseover="openMenu('Forum')"
onmouseout="closeMenu()">User Forum</a> </td>
<td><a href="url"
onmouseover="closeMenu()">Contact</a> </td>
The "closeMenu()" gives the same effect as if you have mouseout a menu item, and the "openMenu()" gives the same effect as if you are hovering a menu item. Thus, the link section and the three menus would be working together like top-menu and sub-menus of one menu.
So, if a visitor hates Javascript, he will still be welcome by pages with normal link sections, and if a visitor doesn't mind taking some Javascript, he will be entertained by some fancy menus.
[Back to index page]
# # #
|