Vertical Menu Wizard screen

Shows a vertical menu on a custom page.

Figure: Vertical Menu Wizard screen

Vertical Menu Wizard screen

Examples

Prerequisites

How to Start

  1. Open the Custom Page Design screen.

    For information about how to open this screen, refer to Custom Page Design screen.


    Open Custom Page
  2. Click Add Widget.

    Custom Page Design screen
  3. On the Pick A Widget screen, on the Layout tab, click Vertical Menu.

    Click Vertical Menu Widget

Fields

Field NameDefinition

Menu
Function:
Specifies the vertical menu from the list.

This field shows the display name of menu you created.

Set Full Height
Function:
Specifies whether the menu to take up the full height available.
Accepted Values:
  • On - The menu to take up the full height available.
  • Off - Specify the menu height manually.
Default Value:
On

Menu Height
Function:
Specifies the height of the vertical menu in pixels.
To Open this Field:
  1. Turn off the Set Full Height field.
Accepted Values:
A positive integer.
Default Value:
300

Text Color
Function:
Specifies the label text color for the menu item.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
ffffff
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Main Menu Background Color
Function:
Specifies the background color for the main menu.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
54544c
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Main Menu Background Image
Function:
Specifies whether to select the image to set as a background from the image library.
Accepted Values:
  • Web URL - Specifies the absolute URL for an image.
  • Image Library - Uses an image from the image library.

    To use image from image library, click Pick An Image.

Default Value:
Image Library
Limitations:
This field is available in these releases:

Image URL
Function:
Specifies the URL of an image file to set as a background for the main menu.
To Open this Field:
  1. In the Main Menu Background Image field, click Web URL.
Accepted Values:
One line of text (a string) in URL format that points to an image file.

The file can be one of these types:

  • .png
  • .jpg
  • .jpeg
  • .gif
  • .bmp
  • .tif
Default Value:
None
Example:
https://mysite.com/demo/image/upload/Sample.jpg
Limitations:

.jpeg and .tif format files are permitted, and .bmp format files are not permitted in these releases:

Pick An Image
Opens this Screen:
Image Picker screen
To Open this Field:
  1. In the Main Menu Background Image field, click Image Library.
Function of this Screen:
Specifies an image file to show on your page or menu.
Limitations:
This field is available in these releases:

Main Menu Background Repeat
Function:
Specifies whether the background image of the main menu is repeated.
Accepted Values:
  • Don't Repeat - The background image does not repeat. The image shows one time.
  • Repeat Mode - The background image repeats both vertically and horizontally.
  • Repeat Horizontally - The background image repeats horizontally.
  • Repeat Vertically - The background image repeats vertically.
Default Value:
Don't Repeat

Submenu Background Color
Function:
Specifies the background color for the submenu.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
54544c
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Submenu Background Image
Function:
Specifies the source for the background image to show on the submenu.
Accepted Values:
  • Web URL - Specifies the absolute URL for an image.
  • Image Library - Uses an image from the image library.

    To use image from image library, click Pick An Image.

Default Value:
Image Library
Limitations:
This field is available in these releases:

Image URL
Function:
Specifies the URL of an image file to set as a background for the submenu.
To Open this Field:
  1. In the Submenu Background Image field, click Web URL.
Accepted Values:
One line of text (a string) in URL format that points to an image file.

The file can be one of these types:

  • .png
  • .jpg
  • .jpeg
  • .gif
  • .bmp
  • .tif
Default Value:
None
Example:
https://mysite.com/demo/image/upload/Sample.jpg
Limitations:

.jpeg and .tif format files are permitted, and .bmp format files are not permitted in these releases:

Pick An Image
Opens this Screen:
Image Picker screen
To Open this Field:
  1. In the Submenu Background Image field, click Image Library.
Function of this Screen:
Specifies an image file to show on your page or menu.
Limitations:
This field is available in these releases:

Submenu Background Repeat
Function:
Specifies whether the background image of the submenu is repeated.
Accepted Values:
  • Don't Repeat - The background image does not repeat. The image shows one time.
  • Repeat Mode - The background image repeats both vertically and horizontally.
  • Repeat Horizontally - The background image repeats horizontally.
  • Repeat Vertically - The background image repeats vertically.
Default Value:
Don't Repeat

Show Icons
Function:
Specifies whether to show an icon for each menu item.
Accepted Values:
  • On - Lets you add icons to the menu items.
  • Off - The menu items do not have icons.
Default Value:
Off

Collapsible
Function:
Specifies whether to show the expand and collapse button on your menu.
To Open this Field:
  1. On the Vertical Menu screen, turn on the Show Icons field.
Accepted Values:
  • On - The page shows the expand and collapse button on your menu.
  • Off - By default, the page shows the menu items.
Default Value:
Off

Collapsible Icon URL
Function:
Specifies the URL for the icon to show on the collapsible menu button.
To Open this Field:
  1. On the Vertical Menu screen, turn on the Show Icons field.
  2. Turn on the Collapsible field.
Accepted Values:
One line of text (a string) in URL format that points to an image file.

The file can be one of these types:

  • .png
  • .jpg
  • .jpeg
  • .gif
  • .tif
Default Value:
None

Display Collapsible Menu Button Title
Function:
Specifies whether to show a name for the expand and collapse button on your menu.
To Open this Field:
  1. On the Vertical Menu screen, turn on the Show Icons field.
  2. Turn on the Collapsible field.
Accepted Values:
  • On - Shows a name for the expand and collapse button on your menu.
  • Off - No name shows for the expand and collapse button.
Default Value:
Off

Expand Menu Button Title
Function:
Specifies a name for the expand button to show on your menu.
To Open this Field:
  1. On the Vertical Menu screen, turn on the Show Icons field.
  2. Turn on the Collapsible field.
  3. Turn on the Display Collapsible Menu Button Title field.
Accepted Values:
One line of text (a string).
Default Value:
None

Collapse Menu Button Title
Function:
Specifies a name for the collapse button to show on your menu.
To Open this Field:
  1. On the Vertical Menu screen, turn on the Show Icons field.
  2. Turn on the Collapsible field.
  3. Turn on the Display Collapsible Menu Button Title field.
Accepted Values:
One line of text (a string).
Default Value:
None

Icon Width
Function:
Specifies the width of the icon to show on the menu items.
To Open this Field:
  1. On the Vertical Menu screen, turn on the Show Icons field.
Accepted Values:
A positive integer.
Default Value:
40

Menu State
Function:
Specifies the status of the menu item when a user views the page at runtime.
Accepted Values:
  • Idle - The menu item stays static.
  • Hover - Selects menu item when you mouse over it.
  • Active - The menu item is highlighted. So, the user can see that he is now at this page.
Default Value:
Idle

Font Family
Function:
Specifies the font family for your menu item.
Accepted Values:
A font name from the list.
Default Value:
None
Limitations:
The Font Family field is available in these releases:

Font Size
Function:
Specifies the font size in pixel for your menu item.
Accepted Values:
A positive integer.
Default Value:
None
Limitations:
The Font Size field is available in these releases:

Bold
Function:
Specifies whether the menu item is bold.
Accepted Values:
  • On - Shows the menu item in bold.
  • Off - Shows the menu item in normal font weight.
Default Value:
Off
Limitations:
The Bold field is available in these releases:

Italic
Function:
Specifies whether the menu item of your menu is italic.
Accepted Values:
  • On - Shows the menu item in italic.
  • Off - Does not show the menu item in italic.
Default Value:
Off
Limitations:
The Italic field is available in these releases:

Underline
Function:
Specifies whether the menu item is underlined.
Accepted Values:
  • On - Shows the menu item underlined.
  • Off - Shows the menu item with no underline.
Default Value:
Off
Limitations:
The Underline field is available in these releases:

Menu Item Foreground Color
Function:
Specifies the foreground color for your menu item.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
F0FFFF
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Menu Item Background Color
Function:
Specifies the background color for your menu item.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
#54544C
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Add
Function:
Adds the widget to the custom page.