Groups

Groups are containers for the commands (items) on a menu. They are responsible for specifying settings such as background color, frame thickness and color, margins, etc.

Listed below are the attributes of groups and specific information about each one:

  • Back Color
    To change the background color of a group, select the group. On the Menu menu click Color.
    You can also change the background color of a group by using the Image dialog. With the image dialog, you will have many more options with which you can customize the look of your group. There are also additional properties available in the dialog. (See Image below).
  • Font
    A group can define the default font used by its  commands. When you change the font on a group, newly created commands will inherit this setting.
    Also, when using toolbars, this will be the font used to represent this group.
    To change the font of a group, first select the group. Then, on the Menu  menu click Font.
  • Cursor
    You can make the mouse pointer change when a user moves the mouse over a hotspot, whether it is a hotspot created by you or a hotspot from the toolbar created by DHTML Menu Builder.
    To change the cursor of a group, fist select the group. Then, on the Menu menu click Cursor.
  • Image
    Groups support several types of images:
    • Back Image
      This is the image used in the background of the container.
      When using images in the background of the groups, the commands will not display the normal background color. If they did, this color would cover the image producing an undesirable effect.
    • Border Size and Colors
      Groups are containers. You can customize the borders.
      The border size attribute will let you set, in pixels, the width of this container. The color settings let you customize the color of each one of the four borders.
    When using the toolbar created by DHTML Menu Builder, you have the option to specify images for your groups to be placed at either or both sides of the group's caption.
    For more information, check the Creating Toolbars section.
    To change any of the above settings for a group, select the group. Then, on the Menu menu click Image.
  • Leading
    This setting controls the vertical spacing between the commands in the group.
  • Margins
    This setting controls the distance from the group's borders to its contents.
  • Special Effects
    The special effects dialog is divided into two sections:
    • Command's Effects
      The settings in this section affect the commands under the selected group.
      Also, if the selected group is going to be displayed on a toolbar, these settings will also affect the toolbar item.
      • Normal and Over
        You can choose different border styles for each of the two supported states, i.e., when the
        • command is not selected (Normal)
        • mouse pointer is passing over or resting on it (Mouse Over or Hover).

        You can choose from five different types of border effects:

        • (none): No border will be drawn.
        • Raised: Draws a border so that the command appears to be raised relative to the background.
        • Sunken: Draws a border so that the command appears to be inset relative to the background.
        • Double: Draws two solid borders around the command
        • Bevel: Draws two borders, one raised and another inset, both half the size of the total border size
        You can also define the base color that will be used to draw these borders by using the color selection boxes next to the border style controls.
      • Border Size
        This setting creates a border of the specified width around the commands.
      • Horizontal and Vertical Margins
        These settings control the distance from the border of the commands to their contents.

    • Group Size
      By default, DHTML Menu Builder evaluates the contents of the group and determines the optimal width and height of the group so that the contents fit. However you can manually adjust these settings using the controls in this dialog:
      • Auto: The width and height are calculated automatically.
      • Background Image: The width or height of the item will be set to the size of the background image.
      • Manual: The width or height can be set to specific values. Note that defining a value that is too small will cause unpredictable results and will cause the contents of the group to display incorrectly. Click Calculate to let DHTML Menu Builder determine the recommended size of the selected item.

    • Group Effects
      This dialog will let you define some special effects for the selected group:
      • Drop Shadow Color: Determines whether or not a shadow behind the selected group will be displayed. Move the slider towards the right to make this shadow darker.
      • Transparency: Makes a group and its contents semi-transparent revealing the whatever content is under the groups.
      • Context Menu: Allows the selected group to be a context menu for the browser. With this enabled, when a user right clicks a page, the selected group will be displayed instead of the browser's default context menu.
      Note that the Drop Shadow and Transparency effect will only work under Internet Explorer 5.5 (or above) for Windows.
  • Commands Layout
    This setting controls the way the commands are aligned inside a group :
    • Vertically (default): Commands will be placed one below the other creating a standard dropdown menu.
    • Horizontally: Commands will be placed one next to the other creating a wide menu. These kind of menus are ideal when there's not enough vertical space to display a menu.

    To change any of the Special Effects settings of a group, select the group. The on the Menu menu click Special Effects.

When the project uses a toolbar, groups are also treated as commands since they will be rendered inside a toolbar and will have properties and behaviors very similar to those that only apply to a command. Continue to read the information about commands as it will become handy when using the toolbar feature of DHTML Menu Builder.

Related topics of interest: