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 2-Col using Divs or 3-Col using Divs. Here we are using the page layout that we developed in the 2-Col using Divs 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, 2colDivs_start.htm.

2. Commentary on the 2colDivs_start.htm page. The start page contains a labelled <div> for each of the four main areas: 'header', 'footer', 'left' and 'content' as shown in the diagram below.

   

   We want to place the menu in the 'left' area.

   Note that in the current 2-column layout the left column has a width of 7.5em. This is also the width of the built-in themes in Menukit so the menu fits exactly into the left column.

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

   Set the container to 'left' 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:

   

4. Save and Exit Menukit

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

   The theme that we used here, 'Gold2', specifies a width of 7.5em for the menu items. The page layout we used also specifies a width of 7.5em for the left column. The menu fits exactly into the left column regardless of the browser's default fontsize.

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, 2colDivs_exp1.htm. This page is the same as 2colDivs_start.htm, the page we started with above, with some filler text inserted into the left column:
   <div id="header"></div>
   <div id="left">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 ut </div>
   <div id="content"></div>

   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:

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

   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.

   Set position to 'absolute'.

   Leave the top field blank and set left to 0px, like this:

   

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

   Since field 'Top:' was left blank the browser used the default value '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. 'Ut wisi enim ad minim...') is positioned as if the menu were not there.

   The menu has a Z-Index of 50 and has a higher stacking order than the flowed text; it covers any text that occupies the same screen area.

   
7. Absolute Positioning with top set to 0.

   Start Menukit and set Top: to 0px, like this:

   

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

   The menu's container, 'sp1', does not establish a positioning context. Therefore the browser uses the next outer element that establishes a positioning context, the 'left' layer in this case.

   The menu is absolutely positioned at the top left corner (0px, 0px) of its positioning context.

   It is removed from the document flow and has no effect on the positioning of the flowed text in 'left'.

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

   Set position to 'relative'.

   

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

   The menu is relatively positioned at (0, 0). This causes it to be positioned in the document as part of the normal flowed content.

   Since it is part of the flowed content the text that follows it (i.e. 'Ut wisi enim ad minim...') is pushed down by the height of the main menu.

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

   Set the top position to 3.1em and the left position to 2.3em.

   

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

   The menu is relatively positioned at (2.3em, 3.1em)...

   ...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. 'Ut wisi enim ad minim...') is pushed down by the height of the main menu.

   The menu is then displaced horizontally by 2.3em and vertically by 3.1em.

   
10. 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 px units 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 the 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 2colDivs_exp5.htm which you can find in the support files.