Print this Tutorial Print
Using Auto height

Objective Define a theme that uses auto-height.

Auto-height allows menu buttons to grow as high as is necessary to allow each menu label to fit into its button. Since this can result in the buttons having differing heights, the auto height feature cannot be used with horizontal menus.

The auto height feature can be used only with CSS Flyout and CSS Dropdown Menus. In the case of Dropdown menus, it only applies to submenus (i.e. the vertical sections).

See live demo below

Starting with the system-supplied theme 'Red6' we will define a new theme, 'MyRed6', that uses auto height.

The menu buttons in theme 'Red6' are defined with a fixed height of 1.82ems. Menu labels that cannot fit into this space are truncated.

Compare with the menu buttons in theme 'MyRed6' which are allowed to grow in height so that long labels can fit in.

 See live demo below
  1. Clone existing theme.
    Always start defining a new theme by copying an existing theme.
    Click the Themes tab to bring it forward. Select 'CSS Flyout' in the Type field. Select theme 'Red6'.

    Press the 'Clone Theme' button . When the dialog box opens, key in 'MyRed6' (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.
    • To protect against making accidental changes, you may lock/unlock a theme with the Lock button Lock/Unlock theme. 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.
  2. About the 'Auto height' checkbox
    Level 0 in a 'CSS Dropdown' menu is horizontal and therefore cannot have auto height enabled.

    Note that the 'Auto height' checkbox is visible only when a valid menu type and level is selected. This means that it is displayed only if a 'CSS Flyout' menu at any level or a 'CSS Dropdown' type at levels 1 or higher is selected.

  3. Enable Auto height Put a tick in the Auto height checkbox.

    Note that when Auto height is enabled the 'Height' field becomes disabled and a new field for 'Pad bottom' appears. Enter whatever value you think is appropriate for the bottom padding. We specified 0.18em like this:

    Save.

    The MyRed6 theme is ready for use.

  4. Live Demo with CSS Flyout menus
  1. Live Demo with CSS Dropdown Menu Even though we ticked the 'Auto height' checkbox for level 0 of the 'MyRed6' theme, Menukit does not apply the auto height feature to the top level (level 0) of a Dropdown menu.

    Since we did not define any levels higher than 0 for 'MyRed6', all submenus use the same theme settings, including the auto height setting, as level 0. Therefore the auto height setting is enabled and applied to the submenus: