CSS Styles
bg-color [Background Color]
Background color settings are available for most items, titles, dividers, containers, and add-ons. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
bg-image [Background Image]
CSS background images are best for creating tiled effects such as gradients. These images can also be used to create parent bullets or item images, however because of a bug in IE6 you may notice a flicker when applying these images to sub menu items or hover states. Because of this we
recommend using the item image and bullet features instead, these add-on's work around the IE6 flickering issues.
bg-repeat [Background Repeat]
Set to repeat, repeat-x, repeat-y, or no-repeat, the default value is no-repeat.
Use the repeat option to tile an image, this option is best used for creating gradient type effects in the items or containers.
Use the repeat option to tile an image, this option is best used for creating gradient type effects in the items or containers.
bg-position [Background Position]
Use any combination of top, left, center, or a dimensional value. The first value defines the vertical position, while the second value determines the horizontal position. When using two values
separate them with a space.
A setting of center center will center your image in the middle of the container or item. The position setting is useful for attaching pure CSS bullets to parent items, you can set the bullet image to the right with center right.
A setting of center center will center your image in the middle of the container or item. The position setting is useful for attaching pure CSS bullets to parent items, you can set the bullet image to the right with center right.
border-color [Border Color]
Defines the color of all border edges. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
border-style [Border Style]
Specify the border style for all edges or individual edges. Valid styles are none, dotted, dashed, solid, double, groove, ridge, inset, outset. The default value is none.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { solid dashed solid dashed } will produce a solid top and bottom border with dashed left and right edges.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { solid dashed solid dashed } will produce a solid top and bottom border with dashed left and right edges.
border-width [Border Width]
Specify the border width for all edges or individual edges. Use any valid unit value, typically px units are
preferred by most developers for border edges.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { 5px 1px 1px 1px } will produce a 5 pixel tall top border with 1 pixel width right, bottom, and left edges.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { 5px 1px 1px 1px } will produce a 5 pixel tall top border with 1 pixel width right, bottom, and left edges.
color [Foreground Color]
The color style typically defines the text color for items and titles. With add-ons this
parameter may define the color of a bullet or interactive element. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
cursor [Cursor]
Specify a valid CSS cursor name... pointer, hand, help, resize, etc. The cursor defines the mouse cursor to display.
font-family [Font Family]
Specify any valid system font family, if left blank the default browser font will be used which is typically Times New Roman.
While any valid font may be specified, we recommend choosing a web safe font from the list, click the build button to the right of the filed to see the available settings.
While any valid font may be specified, we recommend choosing a web safe font from the list, click the build button to the right of the filed to see the available settings.
font-size [Font Size]
Define the size of you text with any valid dimensional unit such as px, em, %, etc.
By default the templates use px units, however we recommend using em units instead. Em's will allow your menu to be truly scalable in IE, px values fix the font size in IE and adjust to the users font size setting in all other browsers. Em's adjust to the users settings in all browsers.
Em units define a font size relative to the font size set on the menus containing element. Because of this your em setting may look different in the visual interface than it does once published to your web page. The visual tool uses a default containing font size of 13px, a setting of 1em in the visual tool is equivelent to 13px.
By default the templates use px units, however we recommend using em units instead. Em's will allow your menu to be truly scalable in IE, px values fix the font size in IE and adjust to the users font size setting in all other browsers. Em's adjust to the users settings in all browsers.
Em units define a font size relative to the font size set on the menus containing element. Because of this your em setting may look different in the visual interface than it does once published to your web page. The visual tool uses a default containing font size of 13px, a setting of 1em in the visual tool is equivelent to 13px.
font-style [Font Style]
Set to normal, italic, oblique. The default value is normal.
font-weight [Font Weight]
Set to normal, bold, bolder, lighter. The default is normal.
height [Height]
Defines the height of an item or container. Use any valid CSS unit such as px, em, %, etc. to define your
dimensions. Setting the height to auto is the same as leaving the field blank.
margin [Margin]
Margins comprise the space between the outside edge or border of an item and the next item or its container. Use any valid dimensional unit such as px, em, %, etc.
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges separate each value with a space... { 10px 5px 10px 5px }.
Margins are best used with main or sub menu items to create a space or gap between the items. In a vertical sub menu you can add a bottom or top margin to create blank space between the items.
Margins may also be used to specifically position a sub menu container, use negative or positive values to offset the default positioning. You can also automatically position a sub menu by simply dragging it to any desired location while in design view.
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges separate each value with a space... { 10px 5px 10px 5px }.
Margins are best used with main or sub menu items to create a space or gap between the items. In a vertical sub menu you can add a bottom or top margin to create blank space between the items.
Margins may also be used to specifically position a sub menu container, use negative or positive values to offset the default positioning. You can also automatically position a sub menu by simply dragging it to any desired location while in design view.
padding [Padding]
Padding is the space between an item or containers content and its edge, or border if applied. Use any valid dimensional unit such as px, em, %, etc.
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges separate each value with a space... { 10px 5px 10px 5px }.
Padding applied to the main or sub menu containers create a buffer between your menu items and the edges of the container.
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges separate each value with a space... { 10px 5px 10px 5px }.
Padding applied to the main or sub menu containers create a buffer between your menu items and the edges of the container.
text-align [Text Align]
Set to left, center, or right. The default value for this setting is typically inherited from the HTML page containing the menu.
font-variant [Font Variant]
Set to normal or small-caps. The small-caps option applies upper-case to all characters.
line-height [Line Height]
Set to any integer value greater than 0. The value determines the height of the text line in pixels. Most browsers will center the actual text within the height defined. Full cross browser testing for likeness should be performed with this setting.
text-decoration [Text Decoration]
Set to none, underline, overline, line-through, blink. The default value is none.
width [Width]
Defines the width of an item or container. Use any valid CSS unit such as px, em, %, etc. to define your dimensions. Setting the width to auto is the same as leaving the field blank.
If setting a width for a main or sub menu container, make sure the width is wide enough to accommodate your content.
If setting a width for a main or sub menu container, make sure the width is wide enough to accommodate your content.
Add-On: Box Animation
The box animation zooms and shrinks a CSS styled box before and after a sub menu is displayed. A wide array of effects may be achieved with this add-on by customizing the styles of the box and tweaking the position setting.
box_animation_frames [Frames]
This is the total number of animation frames to use, however if combined with an
accelerator the number may be lower than what you specify resulting in a quicker animation sequence.
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
box_accelerator [Accelerator]
You can add some snap to the animation effect with the accelerator setting. Usually a value in the range of .1 to 2.0 works well.
box_position [Position]
valid values are center, top, left, top-left. The position determines the starting point from where the box will grow and shrink back to.
Add-On: Fade Subs
The fade subs animation applies to sub menus. When displayed the sub menu will fade in and then fade out when hidden.
fade_in_frames [Fade In Frames]
This is the total number of animation frames to use during the fade in animation. A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
fade_out_frames [Fade Out Frames]
This is the total number of animation frames to use during the fade out animation. A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
Add-On: Bump Subs
The bump subs animation applies to sub menus. When displayed the sub menu will start at a
slightly offset position and slide to its final and correct location.
bump_animation_frames [Frames]
This is the total number of animation frames to use. A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
bump_distance [Distance]
Defined using any integer value greater than 0. The distance determines how for the bump animation will travel.
bump_main_direction [Main Direction]
valid values are up, down, left, right. The default value is up. This determines the direction that the bump animation will travel for the 1st level sub menus which belong to main parent items.
bump_sub_direction [Sub Direction]
valid values are up, down, left, right. The default value is up. This determines the direction that the bump animation will travel for 2nd level and greater sub menus.
bump_auto_switch_main_left_right_directions [Auto Switch Direction]
Set to true or false. The default value is false. When true 1st level sub menus will automatically bump left or right. The direction is determined by which side of the item a previous sub menu was last visible. This feature works best with horizontal main menus which have little or no show delay set on the sub menu visibility.
Add-On: Slide Subs
This addon slides sub menus into position from customizable directions. A unique animation feature is included for dropping subs off screen when hidding sub menus.
slide_animation_frames [Frames]
This is the total number of animation frames to use, however if combined with an
accelerator the number may be lower than what you specify resulting in a quicker animation sequence.
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
slide_accelerator [Accelerator]
You can add some snap to the animation effect with the accelerator setting. Usually a value in the range of .1 to 2.0 works well.
slide_left_right [Main Right]
By default 1st level subs slide in from the top, setting this value to true will force 1st level subs to slide from the left. This works best with vertically oriented main menu items.
slide_left_right [Sub Right]
By default 2st level subs slide in from the top, setting this value to true will force 2nd level subs to slide from the left. This works best with vertically oriented sub menu items.
slide_offxy [Offset XY]
Define with an integer value. The offset applies to the left position of the sub for left to right animations and to the top position for top to bottom animations.
The offset does not affect the final location of the sub menu, rather the location from which the slide appears. The offset is useful for sub menus which appear on top of there parent containers. By offsetting the slide the animation can be made to appear as if its sliding in from under the parent container even though its final resting spot is over the container.
The offset does not affect the final location of the sub menu, rather the location from which the slide appears. The offset is useful for sub menus which appear on top of there parent containers. By offsetting the slide the animation can be made to appear as if its sliding in from under the parent container even though its final resting spot is over the container.
slide_drop_subs [Drop Subs]
Set to true or false. When set to true, the sub menu hide animation will drop down and off the screen or to a set position instead of reverse sliding up or left.
slide_drop_subs_height [Drop Height]
Set to any integer value greater than 0. This setting requires the drop subs setting to be true.
The height determines how far the sub menu will drop before disappearing.
The height determines how far the sub menu will drop before disappearing.
slide_drop_subs_disappear [Drop Hide]
Set to true or false, the default value is false. This setting requires the drop sub setting to be true and a drop height.
By default dropped subs gradually hide as if sliding behind another object. Setting this option to true will cause the sub to disappear without the added effect when it reaches the set drop height.
By default dropped subs gradually hide as if sliding behind another object. Setting this option to true will cause the sub to disappear without the added effect when it reaches the set drop height.
Add-On: Merge Subs
This effect create a duplicate clone of the sub menu to be displayed, sets the new sub and the original to a custom opacity level, then merges the two into one by sliding them into each other.
merge_frames [Frames]
This is the total number of animation frames to use. A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
merge_updown [Main Up]
Set to true or false. The default value is false. When true, the 1st level subs will merge from the top and bottom rather than from the left and right.
merge_sub_subs_updown [Subs Up]
Set to true or false. The default value is false. When true, all 2nd level and higher subs will merge from the top and bottom rather than from the left and right.
merge_opacity [Opacity]
Set to a decimal value between 0 and 1. This sets the opacity of the merging sub menus.
Add-On: Hover Fill Items
This effect creates an animated fill effect on hovered items. The animation may be faded or grown from any direction. The fill box is fully CSS customizable and can include background images, borders, and custom colors.
hoverfill_apply_to [Apply To]
Set to parent, non-parent, all. The default value is all.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
hoverfill_main_type [Main Animation type]
Set to none, grow, fade. Grow will cause the fill box to expand from a custom direction and may combine a fade effect if specified.
hoverfill_main_direction [Main Grow Direction]
Set to center, up, down, left, right. The direction is only valid when the animation type is set to grow.
hoverfill_main_step_size [Main Grow Step Size]
Set to an integer value greater than 0. The step size determines how many pixels to grow the fill between each animation frame. The higher the value the faster the animation will run, values between 1 and 5 work well.
hoverfill_main_fade_in [Main Grow Fade In]
Set to true or false. When true, grow animations will also fade from transparent to opaque as they fill the item area.
hoverfill_main_fade_type_steps [Main Fade In Steps]
Set to an integer value greater than 0. The setting works with the fade animation type and has no bearing on the 'grow fade in' option. The setting determines the number of frames to use with a fade animation, the higher the value the slower the animation effect will be.
hoverfill_main_offset_width [Main Offset Width]
Set to any positive or negative integer value. This will offset the width of the hoverfill area in pixels by the specified amount. This is typically usefull for adjusting the width when using bordered edges, as a bordered edge will add extra size. To offset this extra size of a border use a negative value.
hoverfill_main_offset_height [Main Offset Height]
Set to any positive or negative integer value. This will offset the height of the hoverfill area in pixels by the specified amount. This is typically usefull for adjusting the width when using bordered edges, as a bordered edge will add extra size. To offset this extra size of a border use a negative value.
hoverfill_sub_type [Sub Animation type]
Set to none, grow, fade. Grow will cause the fill box to expand from a custom direction and may combine a fade effect if specified.
hoverfill_sub_direction [Sub Grow Direction]
Set to center, up, down, left, right. The direction is only valid when the animation type is set to grow.
hoverfill_sub_step_size [Sub Grow Step Size]
Set to an integer value greater than 0. The step size determines how many pixels to grow the fill between each animation frame. The higher the value the faster the animation will run, values between 1 and 5 work well.
hoverfill_sub_fade_in [Sub Grow Fade In]
Set to true or false. When true, grow animations will also fade from transparent to opaque as they fill the item area.
hoverfill_sub_fade_type_steps [Sub Fade In Steps]
Set to an integer value greater than 0. The setting works with the fade animation type and has no bearing on the 'grow fade in' option. The setting determines the number of frames to use with a fade animation, the higher the value the slower the animation effect will be.
hoverfill_sub_offset_width [Sub Offset Width]
Set to any positive or negative integer value. This will offset the width of the hoverfill area in pixels by the specified amount. This is typically usefull for adjusting the width when using bordered edges, as a bordered edge will add extra size. To offset this extra size of a border use a negative value.
hoverfill_sub_offset_height [Sub Offset Height]
Set to any positive or negative integer value. This will offset the height of the hoverfill area in pixels by the specified amount. This is typically usefull for adjusting the width when using bordered edges, as a bordered edge will add extra size. To offset this extra size of a border use a negative value.
Add-On: Item Bullets (CSS Based / Imageless)
These item bullets are styled completely with CSS and are drawn by the QuickMenu software on the fly when your menu loads without the need for images. A host of shapes, styling options, and hover plus active features are combined into this relatively lightweight add-on.
ibcss_apply_to [Apply To]
Set to parent, non-parent, all. The default value is all.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
ibcss_main_type [Main Type]
Click the build button to the right of this field to select the type of arrow to display for the main items.
ibcss_main_direction [Main Direction]
Set to down, right, up, left. These options apply to arrow type bullets only and determine the direction in which the main arrow will point.
ibcss_main_size [Main Size]
Set to any integer value greater than 0. This determines the size of the bullet for the main menu items.
ibcss_main_bg_color [Main Static Background Color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet.
ibcss_main_bg_color_hover [Main Static Background Hover color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet when the mouse is over the menu item.
ibcss_main_bg_color_active [Main Static Background Active color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet while the menu items child sub menu is visible. If the item does not contain a sub menu then only the hover color will be visible while the mouse is over the menu item.
ibcss_main_border_color [Main Static Border Color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet.
ibcss_main_border_color_hover [Main Static Border Hover color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet when the mouse is over the menu item.
ibcss_main_border_color_active [Main Static Border Active color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet while the menu items child sub menu is visible. If the item does not contain a sub menu then only the hover color will be visible while the mouse is over the menu item.
ibcss_main_position_x [Main Offset X]
Set to any negative or positive integer value. The bullet will be horizontally offset from its default positioning.
ibcss_main_position_y [Main Offset Y]
Set to any negative or positive integer value. The bullet will be vertically offset from its default positioning.
ibcss_main_align_x [Main align X]
Set to left, center, right. The bullet will be positioned left, center, or right, within each menu item.
ibcss_main_align_x [Main align X]
Set to left, middle, right. The bullet will be positioned left, middle, or right, within each menu item.
ibcss_sub_type [Sub Type]
Click the build button to the right of this field to select the type of arrow to display for the sub items.
ibcss_sub_direction [Sub Direction]
Set to down, right, up, left. These options apply to arrow type bullets only and determine the direction in which the sub arrow will point.
ibcss_sub_size [Sub Size]
Set to any integer value greater than 0. This determines the size of the bullet for the sub menu items.
ibcss_sub_bg_color [Sub Static Background Color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet.
ibcss_sub_bg_color_hover [Sub Static Background Hover color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet when the mouse is over the menu item.
ibcss_sub_bg_color_active [Sub Static Background Active color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet while the menu items child sub menu is visible. If the item does not contain a sub menu then only the hover color will be visible while the mouse is over the menu item.
ibcss_sub_border_color [Sub Static Border Color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet.
ibcss_sub_border_color_hover [Sub Static Border Hover color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet when the mouse is over the menu item.
ibcss_sub_border_color_active [Sub Static Border Active color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet while the menu items child sub menu is visible. If the item does not contain a sub menu then only the hover color will be visible while the mouse is over the menu item.
ibcss_sub_position_x [Sub Offset X]
Set to any negative or positive integer value. The bullet will be horizontally offset from its default positioning.
ibcss_sub_position_y [Sub Offset Y]
Set to any negative or positive integer value. The bullet will be vertically offset from its default positioning.
ibcss_sub_align_x [Sub align X]
Set to left, center, right. The bullet will be positioned left, center, or right, within each menu item.
ibcss_sub_align_x [Sub align X]
Set to left, middle, right. The bullet will be positioned left, middle, or right, within each menu item.
Add-On: Tabs (CSS Imageless)
The tab effect applies to the main menu items. The effect works by inserting a CSS imageless shape between the menu items. By blending the background colors and edge colors of the shapes with the colors of your main items a tab effect is created. Like all QuickMenu add-on's, tabs scale to the size of your menu items and are applied to all menu items, even when dynamically generating your structure from a database.
Tabs are designed to work with horizontally oriented main menus only.
Tabs are designed to work with horizontally oriented main menus only.
tabscss_type [Type]
Set to angled or rounded. Angled tabs cut diagonally across and create a v effect. Rounded tabs arch download create an arch effect between items.
tabscss_size [Size]
Set to any integer value greater than 0. This determines the size of each tabs rounded or angled corners.
tabscss_left_offset [Offset X]
Set to any integer value. The x offset will adjust the tab shape which appears between your standard menu items horizontally from its default position.
tabscss_top_offset [Top X]
Set to any integer value. The y offset will adjust the tab shape which appears between your standard menu items vertically from its default position.
tabscss_apply_far_left [Apply Left]
Set to true or false. When true the tab shape will be added before the first main menu item.
tabscss_apply_far_right [Apply Right]
Set to true or false. When true the tab shape will be added after the last main menu item.
tabscss_apply_middles [Apply Between]
Set to true or false. When true the tab shape will be added between each main menu item.
tabscss_bg_color [Background Color]
Set to any valid CSS color. The background color appears inside of the shape, this color may also be set to transparent.
tabscss_border_color [Border Color]
Set to any valid CSS color. This is the color of the arch or angled line which comprises the tabbed corners. Typically this color will match the color of your main menu item borders.
Add-On: Rounded Subs (CSS Imageless)
Rounded subs use CSS and QuickMenu code to draw a duplicate container with rounded or angled edges. This duplicate container sits inside the standard sub menu container to create a single rounded container effect.
Because rounded subs use a duplicate container, it's best to set the standard sub menu container colors to transparent and remove any borders. When applying this add-on a dialog will appear asking if you would like to automatically apply any existing border and background colors from the standard containers to the rounded corner containers. Choosing yes in this dialog will also automatically set your standard container colors transparent and remove the borders.
Like all QuickMenu add-ons and features, rounded corners are fully scalable and will automatically size to your content and conform to new menu items which may be dynamically generated by a server side database.
Because rounded subs use a duplicate container, it's best to set the standard sub menu container colors to transparent and remove any borders. When applying this add-on a dialog will appear asking if you would like to automatically apply any existing border and background colors from the standard containers to the rounded corner containers. Choosing yes in this dialog will also automatically set your standard container colors transparent and remove the borders.
Like all QuickMenu add-ons and features, rounded corners are fully scalable and will automatically size to your content and conform to new menu items which may be dynamically generated by a server side database.
rcorner_size [Size]
Set to any integer value greater than 0. This sets the size of the rounded or angled corners.
rcorner_border_color [Border Color]
Set to any valid CSS color. This is the color of the edge or border which outlines the rounded corners.
rcorner_bg_color [Background Color]
Set to any valid CSS color. The background color may also be set transparent.
rcorner_opacity [Opacity]
Set to any decimal value between 0 and 1. A value of .5 is equal to 50% opacity. The opacity is applied to the rounded container only, menu items within the container will remain fully opaque. This option works best when sub menu item background colors are set transparent.
rcorner_angle_corners [Angled]
Set to true or false. When true the corners will angle at 45 degrees. When false the corners will have a rounded effect.
rcorner_apply_corners [Apply Where]
Defines which corners receive the rounding effect, corners without the rounding will be squared. Use true and false values
separated by commas... { true, true, true, true } The values start at the top-left... top-left, top-right, bottom-right, bottom-left.
rcorner_top_line_auto_inset [Top Inset]
Set to true or false. When true the top border of the rounded container will be inset the same distance as the main menu item to which it belongs. This effect works with sub menus that are wider then their parent main items.
This feature is best used for blending the rounded container with the main menu items, the adobe template uses this feature for a seamless integration between the items and sub containers.
This feature is best used for blending the rounded container with the main menu items, the adobe template uses this feature for a seamless integration between the items and sub containers.
Add-On: Rounded Items (CSS Imageless)
Rounded items may be applied in various assortments to both main menu and sub menu items. Each rounded item is a duplicate item box with text that sits on-top of the standard items.
Because rounded items are duplicates, any existing item border and background colors should be made transparent or they will be visible at the rounded items corners and edges. Rounded item boxes are absolute positioned containers and as such they do not expand the natural size of the menu items and containers. To size, match, and line things up you may have to tweak the standard item CSS style settings. Typically this involves adding additional padding in the standard CSS to create extra space to help accommodate the rounded items which they will contain.
Text descriptions for the items are automatically applied to the standard item and rounded items which sit on top. Some very advanced layouts may be created by combining rounded items with the rounded subs add-on. A good understanding of padding and the standard CSS styling options is recommended before attempting to apply this advanced add-on to an existing menu. It may be easier to work from a rounded item template such as the adobe implementation.
Because rounded items are duplicates, any existing item border and background colors should be made transparent or they will be visible at the rounded items corners and edges. Rounded item boxes are absolute positioned containers and as such they do not expand the natural size of the menu items and containers. To size, match, and line things up you may have to tweak the standard item CSS style settings. Typically this involves adding additional padding in the standard CSS to create extra space to help accommodate the rounded items which they will contain.
Text descriptions for the items are automatically applied to the standard item and rounded items which sit on top. Some very advanced layouts may be created by combining rounded items with the rounded subs add-on. A good understanding of padding and the standard CSS styling options is recommended before attempting to apply this advanced add-on to an existing menu. It may be easier to work from a rounded item template such as the adobe implementation.
ritem_size [Size]
Set to any integer value greater than 0. This sets the size of the rounded or angled corners.
ritem_apply [Apply]
Set to main, sub, main-sub, parents, titles, dividers. You can apply the rounding to multiple item areas by combining these values and
separating them with a dash '-'... { main-titles } This would apply rounded items to all main menu items and title elements within the menu.
ritem_angle_corners [Angled]
Set to true or false. When true the corners will angle at 45 degrees. When false the corners will have a rounded effect.
ritem_main_apply_corners [Main Apply Where]
Defines which corners receive the rounding effect, corners without the rounding will be squared. Use true and false values
separated by commas... { true, true, true, true } The values start at the top-left... top-left, top-right, bottom-right, bottom-left.
ritem_sub_apply_corners [Sub Apply Where]
Defines which corners receive the rounding effect, corners without the rounding will be squared. Use true and false values
separated by commas... { true, true, true, true } The values start at the top-left... top-left, top-right, bottom-right, bottom-left.
ritem_show_on_actives [Actives Only]
Set to true or false. When true the rounded item effect will only appear while its child sub menu is visible. If the item is not a parent and does not have a child sub menu then the rounding effect will no become visible.
Add-On: Drop Shadows (CSS Imageless)
Drop shadows are duplicate containers which sit under the existing sub menu container and are offset to create a shadow effect at any edge.
The shadow container is automatically sized to the same dimensions of the standard container. If your standard container is transparent then the entire shadow container will be visible. This effect works best when the sub menu container has a background color set.
This add-on can also be used to create semi-opaque sub menus. To do this set the offset to 0, specify a color, and set the opacity to any desired level. The standard menu container and item background color CSS styles should also be set transparent, this will make the semi-opaque drop shadow box the visible container.
The shadow container is automatically sized to the same dimensions of the standard container. If your standard container is transparent then the entire shadow container will be visible. This effect works best when the sub menu container has a background color set.
This add-on can also be used to create semi-opaque sub menus. To do this set the offset to 0, specify a color, and set the opacity to any desired level. The standard menu container and item background color CSS styles should also be set transparent, this will make the semi-opaque drop shadow box the visible container.
shadow_offset [Offset]
Set to any integer value. Use negative values to create a shadow on the top and left or positive values for a shadow at the bottom and right.
shadow_color [Color]
Set to any valid CSS color. This determines the color of the shadow.
shadow_opacity [Opacity]
Set to any decimal value between 0 and 1. A value of .5 is equal to 50% opacity. The opacity is applied to the drop shadow container only, menu items within the container will remain fully opaque.
Add-On: Match Widths (CSS Imageless)
Match widths are applied to all 1st level sub menus, these are sub menus which belong to a main menu item. This add-on will automatically size the sub menus to match the width of the main item to which they belong.
This add-on is designed to work best with horizontally oriented main menus.
This add-on is designed to work best with horizontally oriented main menus.
mwidths_active [Active]
Set to true or false. When true the match widths add-on will be active and applied to your 1st level subs.
Add-On: Item Bullets (Image Based)
Image based item bullets use custom defined images to create static, however, and active images. Typically these bullets are applied to the parent items within a menu to indicate that a sub menu with additional links is available for a given menu item.
ibullets_apply_to [Apply To]
Set to parents, non-parents, all. The default value is all.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
ibullets_main_image [Main Static Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The static image is the default visible image.
ibullets_main_image_hover [Main Hover Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The hover image is visible while the mouse is over the menu item to which it belongs.
ibullets_main_image_active [Main Active Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The active image is displayed when the items sub menu is visible, if the item does not have a sub menu then only the hover image will be shown.
ibullets_main_image_width [Main Image Width]
Set to any integer greater than 0. This defines the width of the images... static, hover, and active. Images should all be the same dimensions or they will be scaled and my not appear as intended.
ibullets_main_image_height [Main Image Height]
Set to any integer greater than 0. This defines the height of the images... static, hover, and active. Images should all be the same dimensions or they will be scaled and my not appear as intended.
ibullets_main_position_x [Main Offset X]
Set to any negative or positive integer value. The bullet will be horizontally offset from its default positioning.
ibullets_main_position_y [Main Offset Y]
Set to any negative or positive integer value. The bullet will be vertically offset from its default positioning.
ibullets_main_align_x [Main align X]
Set to left, center, right. The bullet will be positioned left, center, or right, within each menu item.
ibullets_main_align_x [Main align X]
Set to left, middle, right. The bullet will be positioned left, middle, or right, within each menu item.
ibullets_sub_image [Sub Static Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The static image is the default visible image.
ibullets_sub_image_hover [Sub Hover Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The hover image is visible while the mouse is over the menu item to which it belongs.
ibullets_sub_image_active [Sub Active Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The active image is displayed when the items sub menu is visible, if the item does not have a sub menu then only the hover image will be shown.
ibullets_sub_image_width [Sub Image Width]
Set to any integer greater than 0. This defines the width of the images... static, hover, and active. Images should all be the same dimensions or they will be scaled and my not appear as intended.
ibullets_sub_image_height [Sub Image Height]
Set to any integer greater than 0. This defines the height of the images... static, hover, and active. Images should all be the same dimensions or they will be scaled and my not appear as intended.
ibullets_sub_position_x [Sub Offset X]
Set to any negative or positive integer value. The bullet will be horizontally offset from its default positioning.
ibullets_sub_position_y [Sub Offset Y]
Set to any negative or positive integer value. The bullet will be vertically offset from its default positioning.
ibullets_sub_align_x [Sub align X]
Set to left, center, right. The bullet will be positioned left, center, or right, within each menu item.
ibullets_sub_align_x [Sub align X]
Set to left, middle, right. The bullet will be positioned left, middle, or right, within each menu item.
Add-On: Tabs (Image Based)
The tab effect applies to the main menu items. The effect works by inserting an image directly between the menu items, the image then overlaps both the item to the left and right. Create an image which includes both the top right and top left corners of your tabbed items. The add-on will apply these image between the menu items, if the image is designed to blend with the look of the main items a
seamless tabbed effect will result.
The optional far left and far right tabbed corners use the left half and right half of the single image used to create the effect.
The optional far left and far right tabbed corners use the left half and right half of the single image used to create the effect.
tabscss_type [Type]
Set to angled or rounded. Angled tabs cut diagonally across create a v effect. Rounded tabs arch download create an arch effect between items.
tabs_image [Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths.
The tab image sits to the top and between the main menu items. The image will overlap the items to the left and right. Create an image which includes the top right and top left of your tabs, then blend the colors of the main menu item borders and backgrounds for a seamless tab effect.
The portion of the image which sits inside the borderer of the items is best when left transparent. This way if your item background colors change you will not have to recreate the image.
The tab image sits to the top and between the main menu items. The image will overlap the items to the left and right. Create an image which includes the top right and top left of your tabs, then blend the colors of the main menu item borders and backgrounds for a seamless tab effect.
The portion of the image which sits inside the borderer of the items is best when left transparent. This way if your item background colors change you will not have to recreate the image.
tabs_width [Width]
Set to any ineger value greater than 0. This defines the width of the tab image.
tabs_height [Height]
Set to any ineger value greater than 0. This defines the height of the tab image.
tabs_top_offset [Offset Y]
Set to any ineger value. This will vertically offset the tab image from its default
position. The default position for the image is to the top and between all menu items.
tabs_apply_far_left [Apply Left]
Set to true or false. When true the tab image will be added before the first main menu item. Only the right half of the image will be visible.
tabs_apply_far_right [Apply Right]
Set to true or false. When true the tab image will be added after the last main menu item. Only the left half of the image will be visible.
tabs_apply_middles [Apply Between]
Set to true or false. When true the tab image will be added between each main menu item.
Add-On: Follow Pointer (Image Based)
Follow pointer are custom images which follow the mouse as it moves over the main or sub menu containers. The pointer adds
additional interactivity and helps users pinpoint there location within the menu structure.
tabscss_type [Type]
Set to angled or rounded. Angled tabs cut diagonally across create a v effect. Rounded tabs arch download create an arch effect between items.
pointer_main_image [Main Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths.
The follow pointer image will appear when the mouse is over the main menu container.
The follow pointer image will appear when the mouse is over the main menu container.
pointer_main_image_width [Main Width]
Set to any ineger value greater than 0. This defines the width of the pointer image.
pointer_main_image_height [Main Height]
Set to any ineger value greater than 0. This defines the height of the pointer image.
pointer_main_align [Main Align]
set to top-or-left, bottom-or-right. Vertically oriented menus will use left or right placement, horizontally oriented menus will use top or bottom placement.
pointer_main_off_x [Main Offset X]
Set to any integer value. This will horizontally offset the pointer from its default position.
pointer_main_off_y [Main Offset X]
Set to any integer value. This will vertically offset the pointer from its default position.
pointer_sub_image [Sub Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths.
The follow pointer image will appear when the mouse is over the sub menu containers.
The follow pointer image will appear when the mouse is over the sub menu containers.
pointer_sub_image_width [Sub Width]
Set to any ineger value greater than 0. This defines the width of the pointer image.
pointer_sub_image_height [Sub Height]
Set to any ineger value greater than 0. This defines the height of the pointer image.
pointer_sub_align [Sub Align]
set to top-or-left, bottom-or-right. Vertically oriented menus will use left or right placement, horizontally oriented menus will use top or bottom placement.
pointer_sub_off_x [Sub Offset X]
Set to any integer value. This will horizontally offset the pointer from its default position.
pointer_sub_off_y [Sub Offset X]
Set to any integer value. This will vertically offset the pointer from its default position.
Add-On: Tree Style Menu
This addon converts any standard drop down menu into a tree style menu. A host of animation options and a self collapsing feature allow for a wide and unique array of design possibilites.
Like standard drop down menus, tree style menus benefit from all the same advanced CSS styling features and several of the add-ons. Use bullets, titles, dividers, striping, and more.
Like standard drop down menus, tree style menus benefit from all the same advanced CSS styling features and several of the add-ons. Use bullets, titles, dividers, striping, and more.
tree_sub_sub_indent [Sub Sub Indent]
Set to any integer value greater than 0. This defines the indenting of level 2 or greater sub menus.
Typically margin or padding applied through the standard CSS styles adds indenting for the first level sub menus. This option will apply consistent indenting to all level 2+ sub menus.
Typically margin or padding applied through the standard CSS styles adds indenting for the first level sub menus. This option will apply consistent indenting to all level 2+ sub menus.
tree_hide_focus_box [Hide Focus Box]
Set to true or false. When true the focus box which appears when clicking a link will not be visible.
tree_auto_collapse [Auto Hide]
Set to true or false. The auto hide feature will force the previous tree node to automatically collapse when clicking a new node.
tree_expand_animation [Expand Animation Type]
Set to 0, 1, 2, 3. 0=none, 1=accelerate, 2=decelerate, 3=normal. Leave this field blank or set to 0 for no animation effect.
The normal animation is a standard slide effect, accelerate and decelerate modify the normal slide.
The normal animation is a standard slide effect, accelerate and decelerate modify the normal slide.
tree_expand_step_size [Expand Animation Step Size]
Set to any integer value greater than 0. This defines how many pixels the animation will jump between frames. The higher the value the faster the animation effect will run.
tree_collapse_animation [Collapse Animation Type]
Set to 0, 1, 2, 3. 0=none, 1=accelerate, 2=decelerate, 3=normal. Leave this field blank or set to 0 for no animation effect.
The normal animation is a standard slide effect, accelerate and decelerate modify the normal slide.
The normal animation is a standard slide effect, accelerate and decelerate modify the normal slide.
tree_collapse_step_size [Collapse Animation Step Size]
Set to any integer value greater than 0. This defines how many pixels the animation will jump between frames. The higher the value the faster the animation effect will run.
Add-On: Keep Subs In Window
When active this add-on will stop sub menus from falling outside of the browsers visible window area. Sub menus will automatically be moved up or to the left so they are fully visible.
subs_in_window_active [Active]
Set to true or false. When true, large sub menus which can fall outside the browsers visible window area will automatically reposition and stay visible.
Add-On: Persistent State
The persistent state is visible when a menu items link matches the URL location of the document containing the menu. If the item is in a sub menu then
parent's grandparent's, etc. who own the child will also display there persistent state styles.
Persistent states are integral to modern menu design. The persistent items help users locate there current location in the menu relative to the document. For drop down menus you can gain many of the advantages of tree style structures without the real-estate overhead.
Persistent styles are located within the standard CSS style settings. A wide array of custom images, colors, fonts, and more can be applied to persistent items to make them stand out.
Persistent states are integral to modern menu design. The persistent items help users locate there current location in the menu relative to the document. For drop down menus you can gain many of the advantages of tree style structures without the real-estate overhead.
Persistent styles are located within the standard CSS style settings. A wide array of custom images, colors, fonts, and more can be applied to persistent items to make them stand out.
sopen_auto_enabled [Active]
Set to true or false. When true any persistent state styles will be displayed for items with URL's that match the
URL location of the document containing the menu.
sopen_auto_show_subs [Atuo Open Subs]
Set to true or false. When true any any sub menu containing an item with its persistent state showing will by default be visible when the menu loads. This feature works with standard drop down menus and tree structures.
Add-On: Keyboard Access
This add-on adds an extra level of accessibility to the menu. Users can navigate the structure entirely with the keyboard.
Use the arrow, tab, shift-tab, and enter keys to navigate and activate hyperlinks.
Use the arrow, tab, shift-tab, and enter keys to navigate and activate hyperlinks.
keyboard_access_active [Active]
Set to true or false. When true the menu is further accessible via the keyboard, use the arrow, tab, shift-tab, and enter keys.
To test this add-on you may need to preview or save the menu.
To test this add-on you may need to preview or save the menu.
Add-On: IE6 Over Select Tag
This add-on remedies the infamous IE6 select tag / list box bug. Drop down list boxes in IE will not allow dynamic content to z-index above the form element, this add-on
seamlessly works around the issue.
overselects_active [Active]
Set to true or false. When true sub menus will display on top of select tag / drop down list form elements in IE6
Add-On: Show Subs Onload
Unlike the persistent state which matches item URL's to the document's URL, this add-on allows for any sub menu(s) to be set visible when the menu loads.
showload_active [Active]
Set to true or false. When true the show subs onload addon will be enabled.
showload_auto_close [Auto Close]
Set to true or false. When true sub menus which start visible will automatically hide based upon the mouseover and mouseclick settings for the menu. With a mouse over menu the visible subs will close once the user moves about the page. With onclick menus the visible sub will close once a different menu item is selected.
qm-startopen [Show]
Set to true or false. When true the sub menu container will be visible when the menu loads.
Add-On: Item Images
The item images add-on turns any menu item into an image based item with hover and active state support. This add on is typically used for main menu image based buttons, however images may be added to sub menu items as well.
static image[Static Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The static image is the default visible image.
hover image[Hover Image]
Set to true or false. When true QuickMenu will look for an image with the same name as the static image defined for the item, with '_hover' appended to the name. If your static image is called main1.gif, the hover image must be in the same folder and called main1_hover.gif.
The hover image is visible when the mouse is over the menu item, or if no active image is defined, it will also be visible while its child sub menu is visible.
The hover image is visible when the mouse is over the menu item, or if no active image is defined, it will also be visible while its child sub menu is visible.
active image[Active Image]
Set to true or false. When true QuickMenu will look for an image with the same name as the static image defined for the item, with '_active' appended to the name. If your static image is called main1.gif, the hover image must be in the same folder and called main1_hover.gif.
The active image will display while the items sub menu is visible. If the item does not have a child sub then only the hover image will appear.
The active image will display while the items sub menu is visible. If the item does not have a child sub then only the hover image will appear.
alternate text[Alternate Text]
Set to any text description, in some browsers this may appear as a tool tip when hovering over the image. The setting is primarily used for accessibility purposes and helps keep your content valid.
Menu Settings
Vertical
set to true or false. This determines the orientation of the main menu, when true the main items will be vertically oriented, when false they will be horizontally oriented.
Show Delay
Set to an integer value greater than 0. The show delay is defined in milliseconds (1/1000 of a second).
The show delay helps users control there menu selection by delaying the appearance of sub menus.
The show delay helps users control there menu selection by delaying the appearance of sub menus.
Hide Delay
Set to an integer value greater than 0. The hide delay is defined in milliseconds (1/1000 of a second).
The hide delay prevents the sub menus from closing to quickly if a user accidentally moves the mouse off the menu.
The hide delay prevents the sub menus from closing to quickly if a user accidentally moves the mouse off the menu.
On Click
Set to false, 'all', 'all-always-open', 'lev2', or 'main'...
false - Sub menus expand and collapse based on mouse over events only.
'all' - Sub menus expand and collapse based on mouse click events only, sub menus remain visible until clicking outside of the menu area (except for tree style menus).
'all-always-open' - This is the same as the 'all' option except that the visible sub menu will not close when clicking outside of the menu. Combining this option with the 'Show Subs Onload' addon is great for created tab based content areas which are always visible.
'lev2' - 2nd level sub menus expand and collapse based on mouse click events. 1st level sub menus expand and collapse when moving the mouse over a main menu item.
'main' - In this mode the menu behaves similar to a menu system within a Windows or Mac application. To activate the menu a main item must be clicked, then the remaining structure may be navigated with mouse over events. The menu will close when clicking in the HTML document outside of the menu area.
During visual design the menu only reacts to click events, to test this setting you must preview the menu.
'all' - Sub menus expand and collapse based on mouse click events only, sub menus remain visible until clicking outside of the menu area (except for tree style menus).
'all-always-open' - This is the same as the 'all' option except that the visible sub menu will not close when clicking outside of the menu. Combining this option with the 'Show Subs Onload' addon is great for created tab based content areas which are always visible.
'lev2' - 2nd level sub menus expand and collapse based on mouse click events. 1st level sub menus expand and collapse when moving the mouse over a main menu item.
'main' - In this mode the menu behaves similar to a menu system within a Windows or Mac application. To activate the menu a main item must be clicked, then the remaining structure may be navigated with mouse over events. The menu will close when clicking in the HTML document outside of the menu area.
Left Sided Subs
Set to true or false. When true sub menus which are children of vertically oriented menu containers will appear by default at the left edge of the parent item versus the default right edge.
This setting is useful for vertically oriented menus on the right edge of a web page.
This setting is useful for vertically oriented menus on the right edge of a web page.
Horizontal Subs
Set to true or false. When true sub menu items will be horizontally oriented instead of vertically oriented.
Horizontally oriented sub menus must not exceed the width of there parent containers. This is due to the scalable layout of QuickMenu and restrictions placed on this type of content by the browsers. You can typically work around width issues by adding additional padding to the main menu container which will stretch the container beyond your items.
Horizontally oriented sub menus must not exceed the width of there parent containers. This is due to the scalable layout of QuickMenu and restrictions placed on this type of content by the browsers. You can typically work around width issues by adding additional padding to the main menu container which will stretch the container beyond your items.
Flush Left Subs
Set to true or false. When true, sub menus will appear at the left edge of horizontally oriented parent containers, versus the default position which places the sub directly under the parent item.
This setting is typically used with horizontally oriented main menus with horizontally oriented sub menus.
This setting is typically used with horizontally oriented main menus with horizontally oriented sub menus.
Flush Top Subs
Set to true or false. When true, sub menus will appear at the top edge of vertically oriented parent containers, versus the default position which places the sub directly right or left of the parent item.
For a unique and simplified horizontally oriented menu concept, combine this feature with the 'lev2' on click setting.
For a unique and simplified horizontally oriented menu concept, combine this feature with the 'lev2' on click setting.
Copyright (c) 2007, OpenCube Inc., All Rights Reserved.