///Making Your Own Layered Sub-Menus

Making Your Own Layered Sub-Menus

Making Your Own Layered Sub-Menus

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:

1. Create your web page with your main navigation links.

2.Create the sub-menus that will be layered near the main navigation links.

3.Install the JavaScript.

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

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.

http://willmaster.com/a/17/pl.pl?art175

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:

“position: absolute;” is required, and it must remain as is. This allows the JavaScript to place the sub-menus into exact positions on the web page.

“background-color: #EFEFEF;” is optional. Use it when you want to specify a background color for the sub-menus. The color, as all colors in CSS, can be specified in hexadecimal, like the example, as an RGB value, or the color name.

“color: black;” is optional. Use it when you want to specify a text color for the sub-menus.

“border: black;” is optional. Use it when you want to specify a color for a border around your sub-menus.

border-style: solid;” is optional. Use it when you want to specify a style for a border around your sub-menus. Other than “solid”, attributes that can be specified are “none”, “dotted”, “dashed”, “double”, “groove”, “ridge”, “inset”, and “outset”.

“border-top-width: 6px;” is optional. When you want to have a top border for your sub-menus, specify the number of pixels.

“border-bottom-width: 3px;” is optional. When you want to have a bottom border for your sub-menus, specify the number of pixels.

“border-left-width: 1px;” is optional. When you want to have a left border for your sub-menus, specify the number of pixels.

“border-right-width: 1px;” is optional. When you want to have a right border for your sub-menus, specify the number of pixels.

“z-index: 1;” should be present. Although not strictly required, this directs the browser to make this layer, layer number one. (Your sub-menus are layers.) Because each sub-menu will be displayed independent of the others, and only one sub-menu at a time, the number “1” is okay for all.

“visibility: hidden;” is required. Before you create your sub-menus (in the next step) change this to “visibility: show;” — otherwise the browser won’t display your sub-menus during your development phase. Once the sub-menus have been created, change this back to “visibility: hidden;” so the sub-menus won’t be displayed until the cursor travels over one of the main menu links.

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:

“text-decoration: underline;” is used when you want to decorate text different than normal. Other than “underline”, attributes that can be specified are “none”, “blink”, “line-through”, and “overline”.

“color: purple;” is used to specify a color for the linked text.

“font-size: 12px;” is used to specify a size for the linked text.

“font-family: monospace;” is used to specify a font name or family for the linked text. The example uses family “monospace”

“line-height: 18px;” is used to specify a line height for the linked text. This can be used to increase or decrease the space between sub-menu items.

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:

“text-decoration: none;” is used when you want to decorate the hovered text.

“color: blue;” is used to specify a size for the hovered text.

“font-weight: bold;” is used to specify the weight for the hovered text. “normal” could be specified, instead.

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.

“top:9px” specifies nine pixels from the top edge of the browser window to be the top left corner of the sub-menu to be displayed. You can be as exact as you wish, or you can let the JavaScript do the final positioning (see “III. Installing the JavaScript,” below).

“left:5px” specifies five pixels from the left edge of the browser window to be the top left corner of the sub-menu to be displayed. Again, you can be exact or let the JavaScript do the final positioning.

“width:65px;” specifies the width of the sub-menu to be 65 pixels. Adjust as necessary.

“height:40px;” specifies the height of the sub-menu to be 40 pixels. Adjust as necessary.

“padding:6;” is optional. It specifies the padding you want between the border of the sub-menu and the text within the border. It’s expressed in pixels. Adjust or omit as desired.

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?art175Paste 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.

2010-05-26T11:29:28+00:00 April 22nd, 2005|CSS|0 Comments

About the Author:

Leave A Comment