Horizontal Menu Wizard screen

Shows a horizontal menu on a custom page.

Figure: Horizontal Menu Wizard screen

Horizontal Menu Wizard screen

Video: Advanced Page Builder Features

Examples

Prerequisites

How to Start

  1. Click Page Builder.
  2. On the Page Builder screen, do one of these:
    • Create a Custom Page.
      1. Click Add Row

        Custom Page screen
        .
    • Open a custom page
      1. Click the bottom horizontal line of the row or right side vertical line of the row or column.

        Click Bottom Line
      2. Click Add.

        Click Add
  3. Click Add Widget.

    Custom Page Design screen
  4. On the Pick a Widget screen, on the Layout tab, click Horizontal Menu Horizontal Menu icon.

Fields

Field Name Definition

Menu

Function:
Specifies the horizontal menu from the list.

This field shows the display name of menu you created.

Brand Logo

Function:
Specifies whether to add a logo on your menu.
Accepted Values:
  • On - Adds a logo on your menu.
  • Off - You can not add a logo on your menu.
Default Value:
Off

Image Source

Function:
Specifies the source for the logo image to show on the horizontal menu.
To Open this Field:
  1. On the Horizontal Menu screen, turn on the Brand Logo field.
Accepted Values:
  • Web URL - Specifies the absolute URL for an image.
  • Image Library - Uses an image from the image library.
Default Value:
Web URL
Limitations:
This field is available in these releases:

Logo URL

Function:
Specifies the URL for your logo image file to show on the menu.
To Open this Field:
  1. On the Horizontal Menu screen, turn on the Brand Logo field.
  2. In the Image Source field, click Web URL.
Accepted Values:
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

Function:
Specifies the logo image file to show on the menu.
To Open this Field:
  1. On the Horizontal Menu screen, turn on the Brand Logo field.
  2. In the Image Source field, click Image Library.
Accepted Values:
An image file from the list.

Click the Pick an Image button to select a file from the list that shows all image files from the Images screen.

Default Value:
None
Limitations:
This field is available in these releases:

Menu Height

Function:
Specifies the height of the horizontal menu in pixels.
Accepted Values:
A positive integer.
Default Value:
35

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.
Default Value:
Web URL
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:
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

Function:
Specifies an image to set as a background to show on the main menu.
To Open this Field:
  1. In the Main Menu Background Image field, click Image Library.
Accepted Values:
An image file from the list.

Click the Pick an Image button to select a file from the list that shows all image files from the Images screen.

Default Value:
None
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.
Default Value:
Web URL
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:
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

Function:
Specifies the background image to show on the submenu.
To Open this Field:
  1. In the Submenu Background Image field, click Image Library.
Accepted Values:
An image file from the list.

Click the Pick an Image button to select a file from the list that shows all image files from the Images screen.

Default Value:
None
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

Main Menu Items Alignment

Function:
Specifies the position of the menu items that show on the main menu.
Accepted Values:
  • Left - Specifies that the position of the menu items are to the left.
  • Right - Specifies that the position of the menu items are to the right.
Default Value:
Left

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

Icon Position

Function:
Specifies the position of the icon that shows on the menu items.
To Open this Field:
  1. On the Horizontal Menu screen, turn on the Show Icons field.
Accepted Values:
  • Left - Specifies that the position of the icon is to the left of the menu items.
  • Right - Specifies that the position of the icon is to the right of the menu items.
Default Value:
Left

Icon Width

Function:
Specifies the width of the icon to show on the menu items.
To Open this Field:
  1. On the Horizontal 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 your custom page.