Dropdown menu using Behaviours

How to construct a drop-down menu using Behaviours

This menu uses Behaviours to show and hide the drop down menu leafs. This is based on the procedure written for FrontPage 2003 by Jim Buyens.

The menu uses a table structure with a few layers. Normally, layers containing text should be avoided, but in this case the main menu will be graphical, and the menu leafs will be text, but there will be plenty of room for expansion if the font size is changed by any user. The finished menu can be seen here.

Note that his example uses FrontPage/Expression Web Behaviours that were designed to work with older browsers - up to IE 6 but including Netscape 4 which uses the (now obsolete) <layer> tag. They may work with present day browsers, but some code used is bloated, some is deprecated in today's browsers, and may fail completely in tomorrow's.

Start with the CSS to style the menu. This example will use very simple styling.

CSS

Explanation

<style type="text/css">

body {
margin: 0;
padding: 0;
}

Setting margin and padding to 0 for the <body> tag ensures there are no ubnforseen gaps at the left, right and top margins that some browsers may put in. Some browsers add margins, others add padding.

#menuwrap {
position: relative;
margin: 20px auto;
width: 410px;
}

This rule sets the size of the menu to 410px wide, and centres it in the page. The "position: relative" ensures the layers used in the menu stay in the same position relative to the menu. Without this, the layers would appear to move around the page as the browser window is resized.

All tables in the menu are given left and right solid, single line borders.

#menuwrap td {
width: 100px;
text-align: center;
}

The table cells are all set to 100px, with centred text. If 100px is not enough (allow for text resizing) then the menu container will also have to be adjusted - this is set to 400px wide, 4 main menu items at 100px each, plus 2px for the borders on each cell.

This rule styles the text links in the menu. "display: block" means that the entire table cell will be used as the hyperlink, not just the text. Underlining is also removed. Note that no provision has been made to colour the links - the browser defaults of blue for a link, red=active, purple=visited will be used.
A red bottom border is added to make things look "pretty".

#menu {
position: absolute;
z-index: 3;
width: 410px;
}

The main menu container is absolutely positioned. The default attributes for top and left are used positioning the menu at the top left of it's container (the <div id="menuwrap">). "z-index: 3" allows the menu to be seen over the background image - see below.

#menu table {
border: none;
}

The borders are removed from the main menu. Since buttons will be used here borders are superfluous.

These three rules define the drop down menu leafs. Each is absolutely positioned below the corresponding main menu link.
They are given "z-index: 4" so that they will show over everything when made visible. Of course, initially these leaves are hidden.

This styles the background image. Whenever a menu leaf is made visible, so is this image.
The image itself is transparent, so cannot be seen even when "visible". Its job is to provide a mouseover event to close all the visible menu leaves when the mouse is moved off the leaf or main menu. The image therefore completely covers the menu, with a bit of overlap. This should be large enough to accommodate any text resizing.

If not already open, open the Apply Styles task Pane - Task Panes->Apply Styles
Also open the Quick Tag Selector - View->Quick Tag Selector
Then View->Visual Aids->CSS Visibility:hidden elements - make sure this is ticked so hidden layers can be seen.

Create a <div> to contain the menu. This will be styled to centre on the page.
From the Expression Web menu:
Insert->HTML-> <div>

CLick on #menuwrap in the Apply Styles task Pane to apply the style to the <div>.

Create the table for the main menu.

Place the cursor in the <div>, then:

Create another <div> in the same way. Apply the #menu style to this <div>. Code/Split View now shows:
<div id="menuwrap">
<div id="menu"></div>
</div>

With the curser in the <div#menu>, Click the insert table icon in the toolbar, and choose 1 row with 4 columns

Now add the Interactive Buttons.

Cick in the first cell.

Insert->Interactive Button

Choose a button style and type in the required link and button text. Note that these buttons should link to real pages, since browsers with Javascript disabled will not be able to open the dropdown menus.

Change the font if required.

On the Image tag, choose .gif or .jpg, and the button states required.

Click OK

Repeat for the other buttons.

Now create the layers for the dropdowns.

Click in one of the table cells, then click the <div#menuwrap> in the quick tag selector

From the menu, Insert->HTML->Layer

Click #leaf2 in the Apply Styles task pane. The layer will now be positioned below the second cell.

Click Insert Table icon in the toolbar and insert a single column 2 row table.

Use the Hyperlink dialogue to make a link to another page or file. Either click the hyperlink icon on the toolbar, or type Ctrl+k to open the dialogue.

Repeat the above for the other dropdowns, using #leaf3 and #leaf4 from the Apply Styles task pane, and the number of rows in each table being the number of links for that dropdown menu.

The background image is next. This is a transparent image with a natural size of 1px x 1px. Since this is totally transparent it can be stretched to size without any problems. A transparent image can be downloaded from http://www.rxs-enterprises.org/images/tp.zip. This zip file also includes a cyan colored image, which may be easier to use when setting up the menu. Replace this with the transparent image when all is done. Use File->Import to bring these images into the web.

Again, click a table cell, then pick <div#menuwrap> from the Quick Tab Bar

Insert->HTML->Layer, then click on #bck in the Apply Styles task pane.

In the file list, browse to the transparent image and drag it into the layer. If a dialogue pops up leave Alternate Text and Long description blank, and click OK.

Switch to Split or Code View and locate the image just inserted.

Change the size to width="430" and height="150". In theory this can be done using picture properties from Design view, but right clicking a 1x1px image is a little difficult.

In design view, click on the image and add a Hyperlink - Ctrl+k The address is javascript:; (javascript colon semi-colon)

Add the behaviours.

Open the Behaviours task pane - Task Panes->Behaviours

Click on the image, then click on the <a> in the Quick Tab Selector.

In the Behaviours task pane:

Click Insert, then Change Property

Click Select Element

Element Type should be div

Change Element ID to leaf2

Click Visibility

Select Hidden

Click OK

Click OK

Change onclick to onmouseover

Repeat for leaf3, leaf4 and bck - this event must also hide the image. Hiding the image MUST be the last in the list.

Hide the hidden layers - View->Visual Aids->CSS visibility:hidden The "hidden" layers should now disappear from view.

Click the first main menu button, then select <a> from the Quick Tag Selector.

On the Behaviours task pane, insert onmouseover events to hide leaf2 and bck as above.

The tables added for the main menu and menu leaves will all have class="style1" (or similar) added to them. This can be removed in Code View. Since this style only sets the table at 100% width this is not important.

I do not recommend using this menu construction, especially if many links are involved in the main menu. The construction is tedious, and the amount of code produced is phenomenal. Maintenance could be a nightmare. Compare this to the menu at the top of most pages in this web site.