Menukit

A Dreamweaver Extension

for making different types of Menus

• CSS Flyout Menus
• • Scalable 2-column page layout using a left-floated <div>

    Menu is positioned in the left column. Submenus appear over the main content area. The width of the left column is specified in em units and changes when the browser's fontsize is changed.

  • • Scalable menu with 3-D buttons (default)

      Menu dimensions and fontsize are specified in em units. As the browser's default fontsize is increased / decreased the entire menu is magnified / reduced correspondingly.

      
    • Scalable menu with 2-dimensional buttons

      This example is identical to the previous one except that it uses 2-dimemsional buttons rather than the default 3-D buttons.

      All CSS menus that are generated by Menukit have 3-dimensional buttons by default. However you can choose to have 2-dimensional buttons instead simply by unchecking the '3-D Buttons' checkbox on the Menu tab of the Menukit extension.

      
    • Non-scalable menu

      Menu dimensions are specified in px units. Menu size should not change when the browser's default fontsize is changed. There is a lot of variation among browsers in how they handle this.

      
    • Fixed Position menu

      Menu does not move when the page is scrolled up or down. Since Internet Explorer 6 does not implement 'position: fixed', Menukit automatically inserts a JavaScript fix that emulates it.

      
  • Non-scalable 2-column layout using a left-floated <div>

    This group is included just for comparison with the previous group. The width of the left column is specified in px units and should not change when the browser's fontsize is changed.

  • • Scalable menu

      Menu dimensions and fontsize are specified in em units. As the browser's default fontsize is increased / decreased the entire menu is magnified / reduced correspondingly.

      
    • Non-scalable menu

      Menu dimensions are specified in px units. Menu size should not change when the browser's default fontsize is changed. There is a lot of variation among browsers in how they handle this.

      
  • Scalable* 3-column layout using left and right-floated <div>'s

    *The width of the left column is expressed in em units and is scalable. The right column has a fixed width specified in px units. (Why fixed width? We use a fixed-width background image to give the right column a color and a border.)

  • • Scalable menu

      Menu dimensions are specified in em units.

      
  • Non-scalable 3-column layout using left and right-floated <div>'s

    The left column has a fixed width of 120px and the right column has a fixed width of 150px.

  • • Non-scalable menu

      Menu dimensions are specified in px units.

      
  • Scalable 3-column layout based on a <table>
  • • Scalable menu

      Menu dimensions are specified in em units.

      
  • Non-scalable 3-column layout based on a <table>
  • • Non-scalable menu

      Menu dimensions are specified in px units.

      
• CSS Dropdown Menus
• • Scalable 2-column layout using a left-floated <div>
  • • Scalable menu

      Menu dimensions are specified in em units.

      
    • Non-scalable menu

      Menu dimensions are specified in px units.

      
  • Scalable 3-column layout using left and right-floated <div>'s
  • • Scalable menu

      Menu dimensions are specified in em units.

      
    • Non-scalable menu

      Menu dimensions are specified in px units.

      
  • Scalable 3-Column layout based on a <table>
  • • Scalable menu

      Menu dimensions are specified in em units.

      
  • Non-scalable 3-column layout based on a <table>
  • • Non-scalable menu

      Menu dimensions are specified in px units.

      
• CSS Horizontal Menus
• • Scalable 2-Column layout using a left-floated <div>
  • • Scalable menu

      Menu dimensions are specified in em units.

      
    • Non-scalable menu

      Menu dimensions are specified in px units.

      
  • Scalable 3-Column layout using left and right-floated <div>'s
  • • Scalable menu

      Menu dimensions are specified in em units.

      
    • Non-scalable menu

      Menu dimensions are specified in px units.

      
  • Scalable 3-Column layout based on a <table>
  • • Scalable menu

      Menu dimensions are specified in em units.

      
  • Non-scalable 3-column layout based on a <table>
  • • Non-scalable menu

      Menu dimensions are specified in px units.