UberMenu 3 Item Layouts

Item Layout Overview

In the diagram below, each second level menu item (header) forms a column, shown in grey (the "box" ).

The menu item consists of two parts: the Item Content (link, image, icon, description), and the submenu (child items)

The Grid Layout determines the size of the grey box

The Item Content Layout determines the arrangement of items inside the pink Item Content box

Menu Item 1

Item Content
Submenu (child items)

Menu Item 2

Item Content
Submenu (child items)

Menu Item 3

Item Content
Submenu (child items)

Grid Layout (Column Width Setting)

The Grid Layout determines the size of the menu item column relative to its parent container. In the diagrams, this simply means the width of the grey column boxes relative to the blue outline (submenu)

In this example, the first menu item's Columns Width is set to 1/2, while the second two are set to 1/4

The setting is found in the Menu Item Settings > Layout > Columns Width

Menu Item 1

Item Content
Submenu (child items)

Menu Item 2

Item Content
Submenu (child items)

Menu Item 3

Item Content
Submenu (child items)

Item Content Layout (Item Layout Setting)

The Item Layout setting controls the arrangement of the elements inside the item, not including the submenu. It is represented by the pink box in the diagram below

Item Content
Submenu (child items)

Elements that make up the Item Content include the Title, Description, Image, Icon, etc. Here are a few examples, zoomed into the target level:

Title and Description
Title
Description
Image Only
Image Left
Title
Description
Image Right
Title
Description
Image Above
Title
Description
Image Below
Title
Description


These layouts can be selected via the Menu Item Settings > Layout > Item Layout

All together now

The layout can be configured like this

1/2 – Image Left

Title
Description
Submenu (child items)

1/4 – Image Right

Title
Descrip
Submenu (child items)

1/4 – Image Only

Submenu (child items)

© SevenSpark 2014