Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Expression Web

2007120104 Email to Ronx
 

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.

  1. 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.
    #menuwrap table {
    margin: 0;
    border-left: 1px solid green;
    border-right: 1px solid green;
    border-collapse: collapse;
    }
    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.
    #menuwrap td a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0;
    text-decoration: none;
    font-family: arial, sans-serif;
    font-size: small;
    border-bottom: 1px solid red;
    }
    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.
    #menuwrap #menu a {
    border: none;
    }
    Remove borders from the links in the main menu.
    #menuwrap #menu td {
    border: none;
    }
    Borders are removed from the main menu table's cells.
    #leaf2 {
    position: absolute;
    top: 19px;
    left: 102px;
    width: 100px;
    z-index: 4;
    visibility: hidden;
    }
    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.
    #leaf3 {
    position: absolute;
    top: 19px;
    left: 204px;
    width: 100px;
    z-index: 4;
    visibility: hidden;
    }
    #leaf4 {
    position: absolute;
    top: 19px;
    left: 306px;
    width: 100px;
    z-index: 4;
    visibility: hidden;
    }
    #bck {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 430px;
    z-index: 2;
    visibility: 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.
    #bck img {
    border: none;
    }
    Remove the border from the background image
    </style>  

    The CSS is:

    <style type="text/css">
    body {margin: 0; padding: 0;}
    #menuwrap table {margin: 0; border-left: 1px solid green; border-right: 1px solid green;border-collapse:collapse;}
    #menuwrap td {width: 100px; text-align: center; }
    #menuwrap td a {display: block; width: 100%; text-align: center; padding: 0; text-decoration: none; font-family: arial,sans-serif; font-size: small;border-bottom:1px solid red;}
    #menu {position: absolute; z-index: 3;}
    #menu table {border:none;}
    #menuwrap #menu a {border: none;}
    #menuwrap #menu td {border: none;}
    #leaf2 {position: absolute; top: 19px; left: 102px; width: 100px; z-index: 4; visibility: hidden;}
    #leaf3 {position: absolute; top: 19px; left: 204px; width: 100px; z-index: 4; visibility: hidden;}
    #leaf4 {position: absolute; top: 19px; left: 306px; width: 100px; z-index: 4; visibility: hidden;}
    #bck {position: absolute; top: -10px; left: -10px; width: 430px; z-index: 2; visibility: hidden;}
    .style2 {width: 696px; height: 143px;}
    </style>
    
  2. 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.
  3. Create a <div> to contain the menu. This will be styled to centre on the page.
    From the Expression Web menu:
    Insert->HTML-> <div>
  4. CLick on #menuwrap in the Apply Styles task Pane to apply the style to the <div>.
    Apply Styles
  5. 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 

      choose 1x4 table
  6. 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.
  7. Now create the layers for the dropdowns.
    • Click in one of the table cells, then click the <div#menuwrap> in the quick tag selector
      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.
  8. 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)
  9. 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
        Change Property
    • 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.
    • Click the second button.
    • Insert onmouseover event to hide leaf3.
    • Insert onmouseover events to show leaf2 and bck:
      • Click Insert, then Change Property
      • Click Select Element
      • Element Type should be div
      • Change Element ID to leaf2
      • Click Visibility
      • Select Visible
      • Click OK
      • Click OK
      • Change onclick to onmouseover
      • Repeat these steps using bck instead of leaf2.
      • Follow above steps to hide leaf3 - use leaf3 instead of leaf2, and select Hidden instead of Visible
    • Click the third button
    • Add onmouseover events to hide leaf2 and leaf4
    • Add onmouseover events to show leaf3 and bck.
    • Click the 4th button
    • Add onmouseover events to hide leaf3
    • Add onmouseover events to show leaf4 and bck
  10. Remove the extra styles that Expression Web helpfully added
    • 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.
  11. Save the page and Preview in Browser. The complete menu can be seen here.

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.

Better examples of a menu can be found at: