Groups

Groups are containers for the commands (items) on a menu. They are responsible for specifying attributes 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. Then, on the Menu menu click Color.
    You can also change the background color of a group by accessing the Image dialog. With the image dialog you will have many more options to customize the look of your group and select more properties from 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 setting will let you adjust, 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.
  • Selection Effects
    The settings in this section affect the commands under the selected group and control the style and color of the bounding rectangle of the menu items.
    Also, if the selected group is going to be displayed on a toolbar, these setting will also affect the toolbar item.
    • Normal and Over
      These settings change the border of the commands when the mouse is  over (Over state) and not over (Normal state).
      You can choose from three different types of border effects:
      • (none): No border will be drawn.
      • Raised: A border will be drawn which has the effect of raising the command towards you.
      • Sunken: A border will be drawn which has the effect of insetting the border into the group's background.
      • Double: Two two solid borders will be drawn around the command.
      • Bevel: Two borders one raised and one sunken, each half the size of the total border width – will be drawn around the command.
      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.

  • Special Effects
    The special effects dialog is divided into two sections:
    • Group Size
      By default, DHTML Menu Builder measures the contents of the group and determines the optimal width and height of the group so that the contents fit into it.
      However you can manually adjust these values using the controls on this dialog:
      • Auto: The program will calculate the width and height automatically based on the item's contents. This is the default setting.
      • Background Image: The width or height of the item will be set to the size of the background image.
      • Manual: DHTML Menu Builder will accept the numbers (in pixels) that you enter here These numbers will define a specific width or height for the group. Note that defining a value that is too small will cause unpredictable results and will incorrectly render the contents of the group. Click the Calculate button to let DHTML Menu Builder calculate 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: Move the slider towards the right to increase the darkness of the shadow displayed behind the selected group.
      • Transparency: Move the slider towards the right to increase the transparency of the group and its contents. This will reveal whatever contents are underneath the group.
      • Context Menu: Check this option to make the selected group the context menu for the browser. This means that 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 for those using 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: