Menukit

A Dreamweaver Extension

for making different types of Menus

 Print

Introduction When defining a theme for any of the CSS menus, you may specify different colors for each of the 4 borders. This provides a mechanism for creating menu buttons that have a 3-dimensional appearance. In this tutorial we will define a theme that has a red button and shaded borders that create the 3-D effect. The basic idea is to give the top and left borders a lighter shade than the button background in its normal state and also give the bottom and right borders a darker shade of the background color. Reverse the order of these shades in the highlighted button like this.

Normal button	Highlighted button

1. Create a new blank page.
   Menukit can only be used on a html (xhtml) page that has been saved.
   Start Dreamweaver in an empty site and go to: File->New...

   On the General tab, select category 'Basic page' and then select 'HTML' in the 'Basic page' panel. Create the page. Save the page as 'start.htm'.

2. Clone an existing theme.
   Theme 'Red7' is permanently locked, as indicated by the red padlock , because it is a system theme.
   Open Menukit and bring forward the Themes tab. Select a theme that has colors similar to the ones you want. We selected Red7 for this tutorial.

   When working with themes for CSS menus, you can choose to work either in 'px' units or in 'em' units. By default, CSS menus display all lengths in 'em' units.

   For the purpose of this tutorial we need to work with 'px' units. Select 'px' in the Units selection list.

   
   Click the 'Clone Theme' button and enter the name you want to give the new theme, 'MyRed7' (without quotes), in the dialog box that opens.
3. All 4 borders in a 2-dimensional button have the same color and size (thickness).
   The new theme has a 2-dimensional border of size 1px. The screenshot below shows the fields on the Themes tab where the 2-D border is defined.
   
4. Since we are defining a theme for a CSS menu, we have the option of working with 3-dimensional borders. Press the 3-D Borders button to switch to the layout for specifying individual borders.
   
   As shown above, each of the 4 borders has a width of 1px. Although this is usually fine for most applications, in this tutorial we will make bigger buttons with wider borders so we can see them more clearly.
5. To create the normal and highlighted buttons shown above in the introduction, change the button's height to 32px and increase the top padding from 1px to 3px. Set the 3-D Border fields as shown here:
   

   Press Save.

   The MyRed7 theme is ready for use. Create 2 simple 3-button menus 'M1' and 'M2', for viewing the new theme. Position the menus absolutely at (10px, 0px) and (10px, 152px) as shown in the screenshots.

   When a CSS menu is selected, the Menu tab includes a checkbox that offers a choice between using 3-D Buttons and 2-D Buttons.

   To give M1 a 3-D appearance tick the 3-D Buttons checkbox:

   

   To give M2 a 2-D appearance, don't tick the 3-D checkbox:

   

   Your page should now look like start.htm in the support files.

   Make sure to set the Units to 'px' on the Menu tab.

• Note The 3-D menu's border is 4px wide; the 2-D menu's border is 1px wide.
  The menu on the left was styled with the 'MyRed7' theme and the 3-D Buttons checkbox ticked. The example on the right is the same menu/theme combination without a tick in the checkbox.