Menukit

A Dreamweaver Extension

for making different types of Menus

 Print

1. Create a local site for this tutorial. You can use either of the page layouts described in the tutorials 3-Col fixed Table or 3-Col scalable Table. Here we are using the page layout that we developed in the 3-Col fixed Table tutorial.

   Download the support files for this tutorial. Create an empty site and copy the support files into it. Start Dreamweaver and open the start page, 3colTable_start.htm.

2. The Challenge In the 3-column layout based on <div>'s we inserted a layer 'topnav' to act as a container for the menu into the header area and styled it 'position: bottom'.

   Here we are using a table-based layout in which the header is implemented as a table cell. This means that we cannot use the same technique because a table cell does not establish a positioning context.

   To get around the problem, we can insert a relatively positioned layer into the table cell to establish a positioning context that coincides with the table cell. This 'liner' layer then allows us, in effect, to position a container for the menu at the bottom of the 'header' table cell.

   Insert a <div> labelled 'liner' into the 'header' table cell:

   <tr>
   <td id="header" height="90" colspan="3"><div id="liner"></div></td>
   </tr>

   To make this into a positioning context we just need to style it with 'position: relative' and give it an explicit height (or width). In this case, since we want to position the menu container at the bottom of this layer, we will style it with 'height' to make it the same height as the table cell, like this:

   #liner {
   position: relative;
   height: 100%;
   }

3. Insert a labelled div, 'topnav', into the 'liner' and position it absolutely at the bottom. We use this as a container for the menu.

   <tr>
   <td id="header" height="90" colspan="3">
   <div id="liner"><div id="topnav"></div></div>
   </td>
   </tr>

   Style it like this:

   #topnav {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   }
4. Import the menu and position it in 'topnav' Use Menukit to import menu 'S1' from the sample.htm page included in the support files and rename it as 'M1'.

   Change the menu type from CSS Flyout to CSS Dropdown.

   'em' units are selected automatically whenever a CSS menu is selected.Set the Units to 'px' .

   Set the container to 'topnav' and set position to 'relative'.

   Set both the top and left to 0px.

   When you have finished, the Menu tab should look like this:

   

5. Save and Exit Save and exit Menukit. If you view the page now in a browser you will see that the menu touches the lower left edge of the header. It remains fixed in this position as the screen width is changed.

   You can also center the menu within the 'topnav' layer using the align attribute, like this:

   <td id="header" height="90" colspan="3"><div id="liner">
   <div id="topnav" align="center">
   <div id="M1m" class="FNM1">

   Your page should now look like page 3colTable_final.htm which you can find in the support files.