Print this Tutorial Print
Menu across Top of Page (<div>'s based layout)

Objective

We want to place one of Menukit's horizontal menus (CSS Dropdown or CSS Horizontal) in the header area of a page with a layout that uses Divs.

The main menu should be positioned flush with the bottom of the header area so that the submenus appear in the content area.

It is assumed that you know how to use the Menukit extension to import a menu into the current page. Refer to tutorials: Simple Menu, Multi-level Menu and Import a Menu if you need to learn how to do this.

  1. Create a local site for this tutorial. You can use any of the page layouts described in the tutorials 1-Col Centered, 2-Col using Divs or 3-Col using Divs. Here we are using the page layout that we developed in the 1-Col Centered 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, 1col_start.htm.

  2. Commentary on the 1col_start.htm page. The start page contains a labelled <div> for each of the three main areas: 'header', 'footer' and 'content' as shown in the diagram below. We want to position the menu at the bottom of the 'header' area.

    Menukit does not provide an option for positioning a menu at 'bottom' so we need to insert a layer at the bottom where we want the menu to go and then we can put the menu into it.

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

    <div id="wrapper">
    <div id="header">
    <div id="topnav"></div>
    </div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>
    </body>
    #topnav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    }

    Note. The header layers in the 2-Col using Divs and 3-Col using Divs layouts are positioned.
    At the moment, the 'header' div is not a positioned element and therefore it does not establish a positioning context for 'topnav'. We need to change that by adding: "position: relative;" to its style element, like this:

    #header {
    position: relative;
    height: 6em;
    background-color: #87BE9F;
    color: #003300;
    }
  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'.

    Change the menu type from CSS Flyout to CSS Dropdown.

    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:

  4. Save and Exit 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:

    <div id="wrapper">
    <div id="header">
    <div id="topnav"     align="center">

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