 |
 |
|
|
||
This article shows you how to code a sub-menu system that layers a box with menu-items onto the current web page, over the page's normal content. Instructions are in this article rather than in the JavaScript. The JavaScript has instructions related only to the two sections in the script that need to be customized. I did a lot of surfing to see how others coded similar sub-menu systems. Many are quite complex. Others less so. What's presented here is the easiest implementation I was able to develop. You implement it in three steps:
Each step requires the prior step to be completed. If you prefer to have a complete example at hand as you go through the instructions, you'll find it linked from the demonstration page at http://willmaster.com/a/17/pl.pl?art175 The code has been tested to work with Netscape 4.# and 6.#, and IE 5+. It works with Opera only when it identifies itself as MSIE 5.0. I intend to make the JavaScript fully Opera compatible in the near future. I. Creating Your Main Navigation Links This is rather straight-forward. Go ahead and create the links. Once you've created the links, insert onmouseover="MDMG_showsection(1)" into each of the link anchor tags that will have a layered sub-menu. Example: <a href="stuff.html" onmouseover="MDMG_showsection(1)"> Stuff</a> See the number 1 between the parenthesis? Not the first link, but all the rest need to be changed so the links are numbered sequentially — (1), (2), (3), and so forth. It would look something like this: <a href="stuff.html" onmouseover="MDMG_showsection(1)"> Stuff</a> <a href="more.html" onmouseover="MDMG_showsection(2)"> More Stuff</a> <a href="lots.html" onmouseover="MDMG_showsection(3)"> Lots Stuff</a> That's all you need to do to the main links. II. Creating the Sub-Menus This needs to be done in two parts, creating a CSS Style in the HEAD area and creating the sub-menus themselves in the BODY area. A. The CSS Style Put the following CSS Style into the HEAD area of your page:
<STYLE type="text/css">
<!--
.menusectionstyle {
position: absolute;
background-color: #EFEFEF;
color: black;
border: black;
border-style: solid;
border-top-width: 6px;
border-bottom-width: 3px;
border-left-width: 1px;
border-right-width: 1px;
z-index: 1;
visibility: hidden;
}
.menusectionitem {
text-decoration: underline;
color: purple;
font-size: 12px;
font-family: courier, monospace;
line-height: 18px;
}
.menusectionitem:hover {
text-decoration: none;
color: blue;
font-weight: bold;
}
-->
</STYLE>
Now, let's customize it according to your preferences. The first class is "menusectionstyle", which is the style of the box containing the sub-menu. Line by line, the style sheet rules in the example are:
The second class is "menusectionitem", which is the style of the individual menu items in the sub-menu. All of these style sheet rules are optional. In fact, the class itself is optional, if you don't want links a different style than any regular text that might be in the sub-menus. Line by line, the style sheet rules in the example are:
The third class is "menusectionitem:hover", which is the style of the individual menu items in the sub-menu when the user's cursor is over the menu item. All of these style sheet rules are optional. In fact, the class itself is optional, if you don't want links a different style than regular links when the cursor hovers over them. Line by line, the style sheet rules in the example are:
B. The Sub-Menus Before you create the sub-menus, replace "visibility: hidden;" with "visibility: show;" in the style sheet addressed above. After your sub-menus are created, change it back to "visibility: hidden;" The HTML markup for the sub-menus should be placed immediately below the BODY tag. This is not necessarily the place where they will appear, since the sub-menus have specific location rules built in. The reason for placing the sub-menus immediately below the BODY tag is to ensure the browser reads the HTML markup before the sub-menus need to be displayed. Here is an example sub-menu: <div id="submenuA" style="top:9px; left:5px; width:65px; height:40px; padding:6;" class="menusectionstyle"> <a href="sitemap.html" class="menusectionitem">Site Map</a><br> <a href="contact.html" class="menusectionitem">Contact</a> </div> Now, let's customize it according to your preferences. The first attribute is "id" and it is required. The value of "id" is a name you assign to that particular sub-menu. (The JavaScript uses this name to keep track of which sub-menu is which.) The second attribute is "style" and is also required. Of the five rules in the example style's value, only "padding:__" is optional. The reason these particular style rules are specified as an in-line style is because the information is needed to calculate the display of the sub-menus. Not all browser JavaScript engines can access the style rules specified in the HEAD area.
The third attribute is "class" and is required. It's value must be the same as the class created in the HEAD area for this purpose, "menusectionstyle" in our example. Once you've completed the creation of the sub-menus, change the "visibility: show;" style rule in the HEAD area back to "visibility: hidden;" III. Installing the JavaScript At this point, unless you've already done so, pick up the JavaScript from the demonstration page at http://willmaster.com/a/17/pl.pl?art175 Paste the JavaScript into the HEAD area of your page. You'll notice two places in the JavaScript that need to be customized. The first is where you can tell the JavaScript to leave the sub-menu's positioning specifications as is or to adjust the positioning as needed. The second is where you specify the "id" value of each of the sub-menus, along with the sequential number related to the main menu item that each of the sub-menus belongs to. The JavaScript has instructions and is, itself, an example of how to do it.
Now you have the tools to build a sub-menu system like the pros. By: Will Bontrager Copyright 2002 Bontrager Connection, LLC
| ||