FlexMenu a very Flexible Menu Control

The FlexMenu control was introduced in mojoPortal 2.3.9.5. To use FlexMenu you first must specify UseFlexMenu="true" on <portal:SiteMenu and/or <portal:PageMenu.

You then configure the properties of FlexMenu from theme.skin and specify the SkinID as either SiteMenu or PageMenu, or you can also specify the MenuSkinID property on <portal:SiteMenu or <portal:PageMenu and then use the same value.

<portal:FlexMenu runat="server" SkinID="SiteMenu"
    StartingNodePageId="-1"
    StartingNodeOffset="-1"
    MaxDataRenderDepth="-1"
    ContainerElement=""
    ContainerCssClass=""
    RootUlCssClass=""
    RenderDescription="true"
    DescriptionCssClass=""
    ChildContainerElement=""
    ChildContainerCssClass=""
    ChildUlCssClass=""
    ChildNodesPerUl="-1"
    RootLevelLiCssClass=""
    LiCssClass=""
    ItemDepthCssPrefix=""
    ParentLiCssClass=""
    UlSelectedCssClass=""
    LiSelectedCssClass=""
    AnchorSelectedCssClass=""
    AnchorInnerHtmlTop=""
    AnchorInnerHtmlBottom=""
    RenderCustomClassOnLi="true"
    RenderCustomClassOnAnchor="false"
    AnchorCssClass=""
    AnchorChildSelectedCssClass=""
    LiChildSelectedCssClass=""
    UlChildSelectedCssClass=""
    ExtraTopMarkup=""
    ExtraBottomMarkup=""
    IsMobileSkin="false"
/>

StartingNodeOffset can be used for sub menus, there is an example use with 3 levels of horizontal menus in the andreasviklund-02-alt1-flex skin in extra-skins.zip file on our codeplex download page. -1 means no offset. If you set it to a number greater than -1 the menu will begin with the first node of that depth that is in the current page sub hierarchy. If the number is greater than the depth of the current page then it would be a child page, if it is less than the depth of the current page then it would be a page that is in the parent chain of the current page that has that depth.

Note that the depth of root level pages is 0.

MaxDataRenderDepth is the maximum depth of pages that will be rendered. -1 means no limit so all pages of any depth will be rendered. If set to a number greater than -1 then pages with a depth higher than that will not be rendered in the menu.

ContainerElement if specified would wrap the menu in a container element. div or nav are valid values that could be used here. 

ContainerCssClass is used to specify a CSS class name to render on the container element.

ExtraTopMarkup can be set to any markup but should not have any double quotes, it can be used to add extra markup for styling that will be rendered just inside the container element.

ExtraBottomMarkup would typically be any closing tags needed to close tags opened in the ExtraTopMarkup. It would be rendered just inside the closing container element tag.

IsMobileSkin should only be set to true if using FlexMenu in a MobileSkin, it will cause the menu to leave oput pages marked as Web Only. Similarly with the default value of false any pages marked as Mobile Only will be excluded from the menu.

ItemDepthCssPrefix if specified will cause a custom css class for each level of depth. For example you could use ItemDepthCssPrefix="d" and root level pages will render with d0 as one of the classes on the li element, the first level child page below root would get d1 and so on for deeper level pages.

ChildNodesPerUl if set to a value greater than 0 will cause the child pages to be grouped into multiple uls with the specified number of li elements assuming there are more than that many child pages. This can be useful for rendering mega menu style menus.

DescriptionCssClass is a CSS class that will be applied to a span that wraps a page description if the page has a value for the MenuDescription property. This property was added in mojoPortal 2.3.9.5 but is hidden by default since most existing skins and menus cannot use it. The page description is also useful for mega menu scenarios. To make the MenuDescription property visible in PageSettings you need to set this property in theme.skin:

<portal:PageLayoutDisplaySettings  runat="server" 
    ShowMenuDescription="true"
/>

Then you will be able to populate the menu description for pages and optionally use it in the FlexMenu. The description will render inside a span just after the menu link for the page and before and child page ul element. RenderDescription must be true and the menu description must be populated for it to render.

RenderCustomClassOnLi and RenderCustomClassOnAnchor determine where the page specific custom menu class will render if a custom menu class is specified in page settings.

The remaining properties should be self explanatory, they allow you to control what CSS classes are rendered on the menu elements.

Extra Menu Item Content

If you are using FlexMenu for the menu in your skin, it is capable of rendering also a page description (which can be markup), and there is a database field for MenuDescription for each page. By default this MenuDescription is not shown in PageSettings.aspx  because none of the skins we ship with mojoPortal were designed to include the menu description and rendering it in a design that does not expect it just will mess up the menu. However you can make this field appear in pagesettings.aspx by adding this in the theme.skin file of your skin:

<portal:PageLayoutDisplaySettings runat="server"
ShowMenuDescription="true"
/>

Then you can populate the menu description for a page from Page Settings and if using FlexMenu it will render it, however it will be your job to style it with css or to use javascript to show and hide it as needed if needed. FlexMenu will only render the menu description if it is populated so you can leave it unpopulated on some pages if you wish.

Mega Menu Tricks - Splitting the Child Pages Into Multiple UL elements

For any given page in the menu, if it has child pages, the child pages will be rendered as LI elements within a single UL element that is a child of the LI element of the page itself. With FlexMenu it is possible to change that behavior with the ChildNodesPerUl setting. Its default value of -1 means to us 1 UL for all the child pages of the page e.g the default rendering behavior just mentioned. But suppose you change it to ChildNodesPerUl="3", now after every 3rd child page it will close the UL and open a new one. So for example if the page has 9 child pages they will be split into 3 ULs with 3 LI elements each. This kind of markup is usually what you need to make it easier to make a mega menu style menu. Of course most of the work is done with the CSS.