PrintObjective Define a theme for use with Telescopic menus where the menu items have different widths / colors at each menu level.
 |
Starting with a system-supplied theme, 'Blue6', as shown on the left we will define a new theme, 'MyBlue6', as shown on the right. Theme 'Blue6' is defined only for menu level 0 (i.e. top level menu). All submenus inherit the level 0 settings for size, color, font, etc. This can make it hard to see the different submenus in a Telescopic menu. Compare with the submenus in theme 'MyBlue6' which are narrower than their parents and have different colors. |
 |
- 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'.
- Clone an existing theme.
Open Menukit and bring forward the Themes tab. Select 'DHTML Telescopic' in the
Type field. Select theme 'Blue6'.
Press the 'Clone Theme' button
.
When the dialog box opens, key in 'MyBlue6' (without the quotes) to
name the theme and press OK to create the new theme.
Notes.
- Selecting a theme here does not change the current menu's theme. The current menu's theme is shown at the bottom of the tab (shown in red if it is different from the theme that is currently selected for maintenance). You can only change the type and theme of the current menu on the Menu tab.
- Any changes that you make to a theme will be saved when you press
Menukit's Save button. To protect against making accidental changes,
you may lock/unlock a theme with the Lock button
. Input
fields are disabled when a theme is locked. - The preset themes that come with Menukit are permanently locked.
These are shown with a red padlock
and
they cannot be unlocked.
- Define settings for first submenu (Level 1) The
new theme is defined only for level 0 as is shown by the 'Level' selection
list in the top right of the Themes tab:
We need to create 2 more levels, i.e. Level 1 and Level 2. Press the 'New Level' button
. When the dialog opens, enter '1' and press 'OK'.
The new level is created with the same initial values as the level
above it and the new level is selected.
We want the first level submenu to be slightly narrower than the main menu. Change the width from 120px to 116px, like this:
When a theme for a submenu is being processed (i.e. when Level > 0), an additional input field 'Inset' appears. Submenus are displaced to the right by the number of pixels entered here. This allows us to indent a submenu so that it can be centered below its parent. To make the menu appear symmetrical, we must enter a value that is half the difference between the width of the submenu and the width of the main menu.
For example, the top menu has width 120px. The first level submenu has width 116px. Therefore the inset should be 2px in this case.
The bottom area of the Themes tab contains a preview of the currently selected theme.We will now change the colors of the submenu buttons. IN the above screenshot of MyBlue6 we used the highlighted color in the main menu as the normal color in the first level menu. We also used the highlighted color at Level 1 as the normal color for Level 2.Use the colorbutton control in the top right corner of the preview area to set the background color so you can preview your menu colors against the background color of your web page.
It is very easy to do that using the colorbutton controls. Click once on the colorbutton for Normal Background and dip the color picker in the Highlighted Background color. That assigns color #002EB7 to the Normal Background. Now we need to change the color of Highlighted Background. We assigned it the color #0037DD to make it a paler shade of blue.
- Define settings for Level 2 Click the 'New
Level' button . When the dialog opens, enter '2' and press 'OK'.
The new level is created with the same initial values as the level
above it and the new level is selected.
This time make the width 112px. The inset should be half the difference in width between the main menu and the submenu. (120-112)/2 = 4.
Note that the colors in the new level are initially the same as the level above it, Level 1.
Change the Normal Background to #0037DD. Set the Highlighted Background color to a lighter shade eg. #3767FF.
Save.
The MyBlue6 theme is ready for use.
- Live Demo
"Blue6""MyBlue6"OneOne
TwoTwoThreeThree
FourFourFiveFiveSixSixSevenSevenEightEightNineNineTenTenElevenElevenTwelveTwelveOneOneTwoTwoThreeThree
FourFourFiveFiveSixSixSevenSevenEightEightNineNineTenTenElevenElevenTwelveTwelve
