how-to #8: create sub-lists with DIVs (layers)

You may have seen on some sites that there is a list of links which, when you hover over them with the mouse, each displays a sub-list of additional links, text, or graphics. You can reproduce this behaviour easily with HTML DIV elements (layers). You will need to use a DreamWeaver behavior for this demo, but if you use FrontPage or another editor you can still see how it’s done.

This method uses absolute positioning of layers so we can’t use relative (percentage) sizes for DIVs and tables. To demonstrate the technique I will produce some lists of links into this site. If you want, you can preview the example page to see how it works.

steps to take

1. create the initial table

Open a new window and add a table. You can choose the size but to accommodate users of small monitors we’ll make it 600 pixels wide, with three columns and one row. The left column is 490 pixels wide, the middle 10 pixels wide (to give a gutter between the left and right columns) and the right 100 pixels in width. Set the alignment of both the left and right columns to be horizontal: left, and vertical: top.

In the left column put whatever text or images you need. In the right column we need four links to represent various sections of this site. These can be text links, rollovers, Flash buttons or whatever. I used three rollovers in the example and you can download the images I used if you want to reproduce the example page. We don't actually want the links to do anything if clicked, so just set the HREF to 'javascript:;' which will give a null link. We need there to be a link though, not just an image, to fire the onMouseOver event in Navigator 4.x.

2. sdd the DIVs

Insert a DIV with the following parameters:

left: 610px
top: 52px
width: 200px
height: 200px
name: weblayer
visibility: hidden

You might need to adjust the 'top' parameter to ensure the DIV lines up correctly with the main link which displays it.

Leave all other attributes at the defaults. You can now add some content to the layer. Again, this can be anything you like but to produce the effect in the demo I inserted a 2-column table into the DIV, 200 pixels wide, with the left column 10 pixels and the right 190 pixels wide. The left column I left empty, and in the right column I put four text links in the form of a bulleted list. Again, these could be text links, graphics, Flash text, or whatever you like. Of course, you could just add some text, perhaps to explain the item the user rolled over with the mouse and that would do if you are following this how-to.

Then you need to add three more layers, with the same attributes as the first except the name (call them ‘devlayer’, 'softlayer' and ‘otherlayer’ respectively) and the top value for the DIV element, which should be adjusted so that it looks right on the page. Add some content to each DIV as before.

3. test the page

If you test the page now, you will see the table plus the four main links, but they don’t do anything yet. None of the sub-lists are visible, so now we need to show and hide the various layers.

4. add the behavior

To show the required layer, we need a Dreamweaver behavior – the Show/Hide layers behavior. First select the topmost main link button. Select the behavior and the Show-Hide Layers dialog box appears:

Show-hide layers

Click the layer ‘weblayer’ and then the ‘Show’ button. Click the other three layers in turn and click the ‘Hide’ button for each. Click OK.

We now need to attach this behavior to a suitable event. By default it will be the onClick event, but onMouseOver would be better for our purposes. Select this event from the dropdown menu in the Behaviors panel. Note that you will have to show events for IE4.0 and that you want the (onMouseOver) event (not the onMouseOver event without parentheses). This is important for the effect to work in Navigator 4.x.

All this does is show the layer ‘weblayer’ and hide the other three layers when we hover over the top link. Now add the behavior to the other three main links. For the second link, set ‘devlayer’ to show and the other three to hide; for the other two links, set the correct layer to be shown and the other three to hide.

5. test the page again

You should see that when you roll over each main link the associated layer is made visible and the others are hidden. Since you can put more or less what you like in the layers, this can produce some quite sophisticated effects. Try adding Flash buttons or animated GIFs, for example. This interface works in IE4 or later, Navigator 4.71, Netscape 6.1, and Opera 5.11. The only problem is that the vertical position at which the various layers are rendered varies slightly between browsers, which then doesn't look quite right as the sub-list doesn't quite match the vertical level of the main link. To get round this you can put the main links in a layer outside the main table, so that all layers are at least drawn at the correct height relative to one another.

6. downloads

See the completed example page which demonstrates how this technique works.

You can download the small graphics needed to reproduce this demo from the link below.

Download Download rollover graphics for the main links (5K)