Contents / User Interface Reference / Menu options / Graphical appearance

Graphical appearance is where you specify the looks of the menu (colors, images, special effects, etc.) as well as its behavior (how items should appear / disappear etc.). This section also lets you use or preview schemes (pre-defined sets of options) which allow you to match menu's looks with a previously saved scheme.

Graphical appearance / Bitmap scheme
Select this option to use a bitmap scheme. Bitmap schemes will enhance the menu with images.

Graphical appearance / Bitmap scheme / Bitmap scheme name
Bitmap schemes will enhance the menu with images. Some of the other menu settings may be overridden by using a bitmap scheme.However, in case of some browsers (e.g. Netscape 4.x) popup menus will not use images, so it's good to set all options even though they won't have any effect on IE or Netscape 6.

Graphical appearance / Bitmap scheme / Top-level menu generation method
If using a bitmap scheme, this option determines how the top-level menu will be generated: as image(s) -- with or without hover effect, or as HTML code merged with multiple images. The HTML code option is necessary when dynamically creating the top-level menu; The other two options are recommended because they allow you to use non-standard fonts since the texts will be merged into the image (with anti-aliasing effect).

Graphical appearance / Bitmap scheme / Generate bitmap backgrounds for popup menus (if possible)
When this option is selected, DHTML Menu Studio generates bitmap backgrounds for popup menus if they are defined in the selected bitmap scheme. Please note that this can affect a number of options, e.g. the width of popup menus cannot be set when this option is selected.

Graphical appearance / Bitmap scheme / Apply anti-alias effect
By selecting this option you can choose to have the anti-alias effect applied to the top-level menu texts. This will usually look nice for larger font sizes and will not work if 'Top-level menu generation method' is set to 'HTML Code'.

Graphical appearance / Bitmap scheme / Color shift
Using this option you can change the colors of the menu to match the color scheme of your web site. This parameter shifts the colors of menu images by the specified HUE offset (in range of -128 to +128).

Graphical appearance / Bitmap scheme / Saturation shift
This parameter shifts the colors of menu images by the specified SATURATION offset (in range of -128 to +128).

Graphical appearance / Bitmap scheme / Luminance shift
This parameter shifts the colors of menu images by the specified LUMINANCE offset (in range of -128 to +128).

Graphical appearance / Pop-up menus / Event closing pop-ups
When this option is selected pop-up menus will collapse when user moves the mouse cursor away from the menu.

Graphical appearance / Pop-up menus / Event closing pop-ups / Popups automatically close after ... (ms)
This value determines the time (in miliseconds; 1000ms=1 sec) it takes for pop-up menus to automatically collapse upon moving the mouse cursor away from the menu.

Graphical appearance / Pop-up menus / Fonts & Colors / Multi-colored backgrounds / Additional pop-up background colors
Specifying comma-separated colors (e.g. "red, blue, #ffffcd") here will result in different background colors being used for different pop-up menus. The way it works is all the children popups of the 1st top-level menu item will use the original background color, then the children of the 2nd top-level menu item will use the 1st alternative color specified here (e.g. red), the children of the 3rd menu will use the next color in the list, etc. If the top-level menu contains more pop-ups than the number of standard and alternative colors specified, the following pop-ups will again use the 1st color, etc.

Graphical appearance / Pop-up menus / Fonts & Colors / Multi-colored backgrounds / Additional pop-up highlight background colors
Specifying comma-separated colors (e.g. "black, green, #33aa33") here will result in different background highlight colors being used for different pop-up menus. The way it works is all the children popups of the 1st top-level menu item will use the original highlight color, then the children of the 2nd top-level menu item will use the 1st alternative color specified here (e.g. black), the children of the 3rd menu will use the next color in the list, etc. If the top-level menu contains more pop-ups than the number of standard and alternative colors specified, the following pop-ups will again use the 1st color, etc.

Graphical appearance / Pop-up menus / Fonts & Colors / Font face
You can enter one or more fonts (separated by colons)

Graphical appearance / Pop-up menus / Fonts & Colors / Font size
Enter font size (e.g. x-small, 10px or 12px)

Graphical appearance / Pop-up menus / Fonts & Colors / Font style
Choose font style.

Graphical appearance / Pop-up menus / Fonts & Colors / Text color
Choose font color.

Graphical appearance / Pop-up menus / Fonts & Colors / Highlight text color
Choose highlight color.

Graphical appearance / Pop-up menus / Fonts & Colors / Highlight background
Choose highlight background color.

Graphical appearance / Pop-up menus / Fonts & Colors / Background color
Choose background color.

Graphical appearance / Pop-up menus / Fonts & Colors / Underline links
Choose whether menu item links should be underlined always, when moving the mouse over them, or never.

Graphical appearance / Pop-up menus / Fonts & Colors / Make selected item bold
Changes item's font weight to bold whenever the user hovers the mouse over a menu item

Graphical appearance / Pop-up menus / Add shadow effect
This option adds a shadow effect to all pop-up menus. Please note that this effect will only work with IE 5.5 or later browsers (older browsers will display the pop-ups without any effect).

Graphical appearance / Pop-up menus / Add glow effect
This option adds a "radiance" (glow) effect to all pop-up menus. Please note that this effect will only work with IE 5.5 or later browsers (older browsers will display the pop-ups without any effect).

Graphical appearance / Pop-up menus / Transition effect / Fading time (ms)
Setting this to a value other than 0 will add a fade-in effect when popups are to be shown. This value is expressed in miliseconds and determines the transition time. This effect cannot be combined with the scroll effect.

Graphical appearance / Pop-up menus / Transition effect / Scroll-out time (ms)
Setting this to a value other than 0 will add a scroll (slide-out) effect when popups are to be shown. This value is expressed in miliseconds and determines the transition time. This effect cannot be combined with the fade-in effect.

Graphical appearance / Pop-up menus / Transition effect / Number of steps in transition
This option determines how smooth the transition (fade-in or scroll-out) will be. By increasing the number of steps you make the transition smoother but you should keep in mind that this may cause longer delays than desired with slower machines/browsers.

Graphical appearance / Pop-up menus / Transition effect / Apply transition effect to first-level popups only
Selecting this option will result in 1st level popups appearing with the transition effect. The sub-popups will not use any transition effect. Switch this option off to apply the effect to all popups.

Graphical appearance / Pop-up menus / Transition effect / Delay before opening popups (ms)
This option adds a short delay (expressed in miliseconds; 1s=1000ms) before opening a popup. This effect is used in MS Windows and allows users to reach popup menu items even if when hovering over other menu items (up to the specified delay). If this option is set to 0, hovering over other menu items will immediately close the open popup. Normally it shouldn't exceed about 300ms.

Graphical appearance / Pop-up menus / Enable scrolling of pop-up items when they don't fit on the screen / Scroll delay (ms)
You can change this value to increase or decrease the scrolling speed

Graphical appearance / Pop-up menus / Enable scrolling of pop-up items when they don't fit on the screen / Scroll step
Determines the number of pixels by which a single scroll step will scroll a popup.

Graphical appearance / Pop-up menus / Pop-up positioning / Offset between levels
Determines horizontal difference in pixels between a parent and its child element.

Graphical appearance / Pop-up menus / Pop-up positioning / Reverse pop-up expansion direction
Selecting this option will cause pop-up menus to be expanded to the top instead of bottom (for horizontally-oriented menu) or to the left instead of right (for vertically-oriented menu)

Graphical appearance / Pop-up menus / Pop-up positioning / Horizontal offset from top-level menu
This option allows you to specify (in pixels) an additional horizontal offset (positive or negative) from the top-level menu which can be used to move all highest-level pop-ups to the left or right. This is especially useful when using certain frame configurations

Graphical appearance / Pop-up menus / Pop-up positioning / Vertical offset from top-level menu
This option allows you to specify (in pixels) an additional vertical offset (positive or negative) from the top-level menu which can be used to move all highest-level pop-ups to the top or bottom. This is especially useful when using certain frame configurations

Graphical appearance / Pop-up menus / Pop-up positioning / Horizontal offset from parent popup
This option allows you to specify (in pixels) an additional horizontal offset (positive or negative) from the parent popup menu which can be used to move all pop-ups (2nd or higher level) to the left or right. This option does not affect 1st level pop-ups

Graphical appearance / Pop-up menus / Pop-up positioning / Vertical offset from parent popup
This option allows you to specify (in pixels) an additional vertical offset (positive or negative) from the parent popup menu which can be used to move all pop-ups (2nd or higher level) up or down. This option does not affect 1st level pop-ups

Graphical appearance / Pop-up menus / Text alignment
Specify text alignment of pop-up menu items.

Graphical appearance / Pop-up menus / Border size
Enter border size of pop-up menus. Entering 0 will remove borders from pop-up menus.

Graphical appearance / Pop-up menus / Add item separators
This option will add horizontal separators between pop-up menu items.

Graphical appearance / Pop-up menus / Item padding
This value represents distance between consecutive pop-up menu items.

Graphical appearance / Pop-up menus / Menu width
Enter width of pop-up menus. Note that this will have no effect when using bitmap-based pop-ups.

Graphical appearance / Pop-up menus / Adjust first-level pop-up width to top-level item
Select this option to adjust width of top-level popup menus to top-level item's width.

Graphical appearance / Pop-up menus / Opacity (transparency)
Select opacity (transparency) of pop-up menus. This value should be in range 0..100. A default value of 100 means the item will be fully visible. A value of 80 means the popups will be partly transparent (text and images underneeth the popups will be partly visible).

Graphical appearance / Pop-up menus / Force popups to appear over form items
Select this option to fix IE's bug which causes dynamic content to always appear behind SELECT elements (drop-down lists). This work-around, however, has the disadvantage of partially disabling the transparency effect for popups (opacity option). You can see Q3008 (at www.xtreeme.com/dhtml/faq) for another work-around if you wish to use transparent popups.

Graphical appearance / Pop-up menus / White-space separator height
Height of a vertical white-space sepataror item. You can add a separator item to a pop-up by specifying "-" as item's text. This will move all subsequent items down by the number of pixels specified in this option

Graphical appearance / Pop-up menus / Show 'expand pop-up' arrows
Selecting this option will add arrows to items that open a child popup.

Graphical appearance / Top-level menu / Fonts & Colors / Font face
You can enter one or more fonts (separated by colons)

Graphical appearance / Top-level menu / Fonts & Colors / Font size
Enter font size (e.g. x-small, 10px or 12px)

Graphical appearance / Top-level menu / Fonts & Colors / Font style
Choose font style.

Graphical appearance / Top-level menu / Fonts & Colors / Text color
Choose font color.

Graphical appearance / Top-level menu / Fonts & Colors / Highlight text color
Choose highlight color.

Graphical appearance / Top-level menu / Fonts & Colors / Highlight background
Choose highlight background color.

Graphical appearance / Top-level menu / Fonts & Colors / Background color
Choose background color. You can leave this option empty if you want the menu bar to be transparent.

Graphical appearance / Top-level menu / Fonts & Colors / Underline links
Choose whether menu item links should be underlined always, when moving the mouse over them, or never.

Graphical appearance / Top-level menu / Fixed width of all menu items
Determines whether top-level menu items all have a fixed width or if their width depends on the size of their text. Please note that this does not control the total width of the menu bar (see the option below) but only the width of single menu items for a horizontal menu.

Graphical appearance / Top-level menu / Enforce visibility when scrolling
Selecting this option will always keep the menu bar visible (usually near the top edge of browser window), even when scrolling further down into the document.

Graphical appearance / Top-level menu / Enforce visibility when scrolling / Distance from the top edge of the browser window
Set the distance between the menu bar and the top edge of the browser window.

Graphical appearance / Top-level menu / Fixed total width of the menu bar
This option will set the total width of the top-level menu to the value specified either in pixels (e.g. 500) or as percentage (e.g. 100% if the menu bar should be as wide as the browser window or parent element). Leaving this value empty will result in the total width being calculated based on other options and items' text width. Note: This option will not work with bitmap schemes or with the option Fixed width of all menu items.

Graphical appearance / Top-level menu / Text alignment
Select text alignment of top-level menu items.

Graphical appearance / Top-level menu / Horizontal space between items
Determines how much space will be inserted between top-level menu items.

Graphical appearance / Top-level menu / Vertical padding
This value determines padding for top-level menu items.

Graphical appearance / Top-level menu / Border size
Enter border size of top-level menus. Entering 0 will remove the border.

Graphical appearance / Top-level menu / Add item separators
This option will add vertical separators between top-level items.

Graphical appearance / Top-level menu / Opacity (transparency)
Select opacity (transparency) of top-level menu bar. This value should be in range 0..100. A default value of 100 means the item will be fully visible. A value of 80 means the menu bar will be partly transparent (text and images underneeth the bar will be partly visible).

Graphical appearance / Top-level menu / Show 'expand pop-up' arrows
Selecting this option will add arrows to top-level items that have submenus.

Graphical appearance / Vertical menu without popups (variable size)
This option can be only used for vertical menus. Enabling it will result in all subsequent items being shifted down whenever an item is expanded. Instead of displaying a popup, the sub-items will be inserted into the menu just below the parent item. This is very similar to Site Xpert's dynamic tree style.

Graphical appearance / Vertical menu without popups (variable size) / Upon loading hide all items above level
Increasing this number will result in the menu being expanded by default (upon loading) up to the given level.

Graphical appearance / Vertical menu without popups (variable size) / Clicking on folder name expands / collapses folder
When this option is selected, clicking on folder name expands or collapses this folder. You should not use this option if at least one folder in your menu has a link, since this introduces inconsistency and confusion.

Graphical appearance / Vertical menu without popups (variable size) / Remember folders expanded by visitor when re-entering page
Set this option if you want to save information about expanded folders so that when a visitor comes back to the menu page, the state of the menu doesn't change. Unselecting this option results in the menu being collapsed every time the web page is loaded.

Graphical appearance / Vertical menu without popups (variable size) / Collapse all siblings when expanding a folder
When this option is selected, expanding a folder will automatically collapse all its siblings.

Graphical appearance / Vertical menu without popups (variable size) / Color of visited links
You can set color of visited links by selecting this option.

Graphical appearance / General / Sounds / Item hover sound
Sound played when the mouse cursor enters a menu item. This should be a full path to a local file (e.g. c:\sounds\abc.wav)

Graphical appearance / General / Sounds / Item click sound
Sound played when a menu item is clicked. This should be a full path to a local file (e.g. c:\sounds\abc.wav)

Graphical appearance / General / Sounds / Popup open sound
Sound played when a popup menu is opened. This should be a full path to a local file (e.g. c:\sounds\abc.wav)

Graphical appearance / General / Icon column width
This option has an effect only when using icons for top-level or popup icons. This should be same as (or more than) the width of the widest icon used so that menu items don't overlap with the images and are properly aligned. Increasing this value will also increase the left offset of menu item texts.

Graphical appearance / General / Highlight dummy items
Select this option if you want to highlight "dummy" menu items when hovering over them -- dummy items are all items that neither have a target link nor open a child popup.

Graphical appearance / General / Synchronization of menu with current URL
Select this option if you want the menu to be automatically synchronized with the curently visited URL (if not using frames) or synchronized with the content frame (if using frames). Please note that automatic synchronization without using frames makes is very useful when embedding the menu into multiple pages (e.g. using server-side includes). In order for the synchronization feature to work properly, you need to use full, absolute URLs (e.g. http://www.site.com/dir instead of a relative path such as ../dir)