Menu Settings - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

There are a multitude of ways that you can fine-tune the menu styles you choose. This will vary depending on exactly which menu you pick and whether you have chosen to use a Static menu or a Dynamic menu on the second tab. Below are short descriptions of the most popular menu settings that can be adjusted. Most are self explanatory, but they have been listed here in case any clarification is required.

 

Static Menu Settings

 

Menu Width

Sets the total number of pixels wide for your menu. Typically a left or right panel will be between 100 and 150 pixels so you should be looking at a similar value for your menu width.

 

If you set this value to 0 the menu will resize itself automatically to fit the panel width in which the menu appear. So for example if the panel was 130 pixels wide the menu would resize itself automatically to be 130 pixels wide.

Overall Menu Padding

This sets the inside margin within the menu itself, i.e. the gap between the menu border and where the menu text appears. This is measured in pixels. The higher the amount the bigger the gap. A 5 pixel padding is quite typical, but this will vary depending on menu style.

Menu Option Spacing

This sets the vertical space that will appear between each of the main menu options. This is measured in pixels. The higher the value the larger will be the space.

Sub-Menu Option Spacing

This sets the vertical space that appears between each of the sub-menu items. This is measured in pixels. The higher the value the larger will be the space.

Sub Menu Indentation

Lets you set how much sub-menu items will be indented from the Main Menu items.

Menu Background

This setting lets you choose the color of the background for the whole menu. For some menus it will also give you the option to set the Weight, Style and Color for the menus border.

Main Menu Options (Unselected)

Lets you set the font, font size, font color and alignment for the main menu text that is not currently selected (i.e. the mouse is not pointing at it and it has not been clicked on).

Main Menu Options (Hover)

Here you can set how you want Main Menu items to appear when the mouse pointer is hovering over them. This will usually be a slightly different color to the default Main Menu color. For example, if the menu items are normally colored white you might want to pick a hover color such as light yellow. On some menu styles you may also get the option to overline and underline the text. The Overline button will put a line above a main menu item when the mouse is hovering over it and the underline will put a line underneath.

Main Menu Options (Selected)

Lets you set how you want Main Menu items to appear once someone clicks on them. On some menu styles you may also get the option to overline and underline the text. The Overline button will put a line above a main menu item when the mouse is hovering over it and the underline will put a line underneath.

Main Menu Options Bullets

This drop down lets you select what kind of bullet you would like to appear before each of the Main Menu items.

Sub Menu Background

This setting lets you choose the color of the background for the sub-menu items. For some menus it will also give you the option to set the Weight, Style and Color for the sub-menu item’s border.

Sub Menu Options (Unselected)

Lets you set the font, font size, font color and alignment for the sub-menu text that is not currently selected (i.e. the mouse is not pointing at it and it has not been clicked on).

Sub Menu Options (Hover)

Here you can set how you want sub-menu items to appear when the mouse pointer is hovering over them. On some menu styles you may also get the option to overline and underline the sub-menu items when the mouse hovers over them. The Overline button will put a line above a sub-menu item when the mouse is hovering over it and the underline will put a line underneath.

Sub Menu Options (Selected)

Lets you set how you want sub-menu items to appear once someone clicks on them. On some menu styles you may also get the option to overline and underline the text. The Overline button will put a line above a sub-menu item when the mouse is hovering over it and the underline will put a line underneath.

Sub Menu Options Bullets

This drop down lets you select what kind of bullet you would like to appear before each of the sub-menu items.

 

 

 

Dynamic Menu Settings

 

Menu Width

Sets the total number of pixels wide for your menu. Typically a left or right panel will be between 100 and 150 pixels so you should be looking at a similar value for your menu width.

 

If you set this value to 0 the menu will resize itself automatically to fit the panel width in which the menu appear. So for example if the panel was 130 pixels wide the menu would resize itself automatically to be 130 pixels wide.

Overall Menu Padding

This sets the inside margin within the menu itself, i.e. the gap between the menu border and where the menu text appears. This is measured in pixels. The higher the amount the bigger the gap. A 5 pixel padding is quite typical, but this will vary depending on menu style.

Menu Option Spacing

This sets the vertical space that will appear between each of the main menu options. This is measured in pixels. The higher the value the larger will be the space.

Menu Background

This setting varies depending on which dynamic menu style you have selected. For most styles it lets you choose the color of the background for the whole menu, but for others, such as Blue Pill, it lets you choose a background color for the buttons rather than for the whole menu. For some menus it will also give you the option to set the Weight, Style and Color for the menus border. Also under Menu Background settings you will often have an option to choose the sub-menu indicator image. This graphic will appear automatically whenever there are sub-pages to any of the main menu items. If you don’t have any sub-pages you don’t need to worry about the settings the sub-menu indicator.

Main Menu Options (Unselected)

Lets you set the font, font size, font color and alignment for the main menu text that is not currently selected (i.e. the mouse is not pointing at it and it has not been clicked on). On some Dynamic menus you will also have the option to set an item image or bullet point. If this option is available then it is chosen by clicking on the drop down arrow. You will also often have the option to choose the padding for the sub-menu indicator.

Main Menu Options (Hover)

Here you can set how you want Main Menu items to appear when the mouse pointer is hovering over them. This option isn’t available for all Dynamic menus. For some Dynamic menus you will also get the option to set how the sub-page indicator looks.

Main Menu Options (Selected)

Lets you set how you want Main Menu items to appear once someone clicks on them. This option isn’t available for all Dynamic menus. For some Dynamic menus you will also get the option to set how the sub-page indicator looks.

Main Menu Options Bullets

This drop down lets you select what kind of bullet you would like to appear before each of the Main Menu items.

Sub Menu Background

This setting, when available, lets you choose the color of the background for the sub-menu items. For some menus it will also give you the option to set the Weight, Style and Color for the sub-menu item’s border.

Sub Menu Options (Unselected)

Lets you set the font, font size, font color and alignment for the sub-menu text that is not currently selected (i.e. the mouse is not pointing at it and it has not been clicked on).

Sub Menu Options (Hover)

Here you can set how you want sub-menu items to appear when the mouse pointer is hovering over them. You will usually have the option to choose a text color and a background color.

Sub Menu Options (Selected)

Lets you set how you want sub-menu items to appear once someone clicks on them. You will usually have the option to choose a text color and a background color.

Sub Menu Options Bullets

This drop down lets you select what kind of bullet you would like to appear before each of the sub-menu items.

Home  Previous  Next