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. Import the menu and position it absolutely Use Menukit to import menu 'S1' from the sample.htm page included in the support files and rename it as 'M1'.
   You may have already realized that putting the menu into a table cell like this will not produce the positioning that we want. Nevertheless we are doing it here just to show what happens.
   Set the container to 'left' (a <td>) and set position to 'absolute'.

   Set the top to 50px and left to 0px.

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

   

3. Save and Exit Menukit

   After you save and exit the menu is positioned like this:

   Note The table has a width of 95% and is centered in a dark grey background producing the margin that can be seen here to the left of the table.

   This screenshot shows that a table cell does not establish a positioning context for the menu. Therefore the menu is positioned in the next outer container that does establish a positioning context, i.e. the document body in this case.

   (In step 10 below we show how placing a relatively positioned layer inside the table cell also establishes a suitable positioning context).

   
   Remember. Since the table is not a containing block the menu is not actually positioned in the 'left' column. It only appears as if it is so.
   Since the menu is absolutely positioned within the viewport/screen, we can adjust the top and left settings to position the menu in such a way that it appears to be in the left column.

   We are using a page layout with a width of 95% that is centered in the screen. That means a margin of 2.5% on either side and this determines the value we need for the left position.

   The header area has a height of 90px. Add this to the vertical position that we want within the left column giving 140px in this example.

   Since the table cell is not in fact the containing block for the absolutely positioned menu, let us now change the container from 'left' to the 'Document body' to reflect what is really happening:

   

   After you save and exit the menu is positioned like this:

   

5. Insert menu within flowed content in left column
   Note. The filler text in the 'left' column is only for tutorial purposes.
   Start Dreamweaver and open the page, 3colTable_exp1.htm. This page is the same as 3colTable_start.htm, the page we started with above, with some filler text inserted into the left column:
   <tr>
   <td id="left" width="90">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl</td>
   <td id="content">&nbsp;</td>
   <td id="right" width="120"></td>
   </tr>

   Insert a menu inside the flowed text...

   Menukit allows insertion of a menu into a labelled <span> element. (It also allows insertion into labelled <div>'s, <td>'s and <th>'s). In order to place the menu into a specific location, we insert an empty labelled <span> element at the target location in the filler text, like this:

   <tr>
   <td id="left" width="90">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<span id="sp1"></span> sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl</td>
   <td id="content">&nbsp;</td>
   <td id="right" width="120"></td>
   </tr>

   Use Menukit to import menu 'S1' from the sample.htm page included in the support files and rename it as 'M2'.

   Set the container to 'sp1'.

6. Absolute Positioning with 'auto' top.

   Make the top field blank and set the left position to 2.5%, like this:

   

   After you save and exit Menukit, the menu appears in the left column like this:

   Since field 'Top:' was left blank the browser defaulted to 'auto' to determine the top position of the menu. (This is the position it would have had if it's position had been 'static' i.e. normal flow.)

   Also, since the menu is positioned absolutely, it is removed from the flow of text and has no effect on its siblings that come after it in the code. Therefore, the text that comes after the menu (i.e. 'sed diam nonummy...') is positioned as if the menu were not there.

   
7. Relative Positioning at (0px, 0px)

   Set position to 'relative'.

   

   After you save and exit Menukit, the menu appears in the left column like this:

   The menu is relatively positioned at (0, 0). This causes it to be placed in the document at the location where it would have been placed if it had been defined as 'static'.

   Since it is part of the flowed content the text that follows it (i.e. 'sed diam nonummy...') is pushed down by the height of the main menu.

   Compare this with the situation above where the menu was absolutely positioned at Top 'auto' and Left '2.5%'. In that case the menu was not part of the flow and the text after it was not pushed down.

   
8. Relative Positioning at (X, Y) - not (0, 0)

   Set left position to 20px and top position to 30px.

   

   After you save and exit Menukit, the menu is positioned in the left column like this:

   The menu is relatively positioned at (20px, 30px)...

   ...the effect is as if it were first positioned temporarily at (0,0) as described in the previous example.

   The rest of the flowed content is then arranged around it in that position. The text that follows it (i.e. 'sed diam nonummy...') is pushed down by the height of the main menu.

   The menu is then displaced horizontally by 20px and vertically by 30px.

   
9. Fixed Position
   Fixed menus do not move when the screen is scrolled.
   Fixed positioning is the same as 'absolute' positioning except that the positioning context is always the screen/viewport when 'fixed' positioning is used.
   Important!

   When using 'fixed'...

   Always insert an explicit value in pixels for top.

   Although the default value for top is 'auto' when position is 'fixed', you should not rely on it. IE6 does not implement 'fixed' positioning. Menukit provides a workaround by inserting a JavaScript fix that emulates 'fixed' for IE6 only. However, the JavaScript solution requires that the 'top' position be given an explicit pixel value.

   Always specify 'Document body' as the container.

   IE6 implements 'static' or normal flow whenever it sees position 'fixed'. IE6 uses the container specified here as a positioning context whereas more standards-compliant browsers use the screen as the positioning context.

   Why 2.5%?

   We are using a page layout with a width of 95% that is centered in the screen. That means a margin of 2.5% on either side.

   Set Left to 2.5%

   Set Top to 140px

   Set position to 'fixed'

   

   In order to see the effect of 'fixed' positioning in a browser, insert some text into the 'content' area that makes the document long enough to require scrolling.

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

10. Using a Liner layer in a table cell to allow Positioning Although a table cell does not establish a positioning context, we can make it behave as if it did so by lining it with a relatively positioned layer. Open page 3colTable_start2.htm from the support files.

    Insert a <div> labelled 'leftLiner' inside the 'left' table cell, like this:

    <tr>
    <td id="left" width="90"><div id="leftLiner"></div></td>
    <td id="content">&nbsp;</td>
    <td id="right" width="120"></td>
    </tr>

    To make it into a positioning context we just need to give it either a width or a height and set its position to 'relative', like this:

    #leftLiner {
    position: relative;
    width: 100%;
    }

    Now we can position a menu absolutely in the 'leftLiner' layer. Use Menukit to import menu 'S1' from the sample.htm page in the support files and rename it as 'M3'.

    Set the container to 'leftLiner' and position the menu absolutely at top 50px and left 0px, like this:

    

    After you save and exit Menukit, the menu appears in the left column like this: