How To Create Multiple Horizontal Menus

mojoPortal content management system comes with a lot of skins with different menu styles. One of these skins (andreasviklund-02) has two sets of horizontal menus allowing for a more compact menu system on 2nd tier pages. You can check out the above mentioned skin using the demo site for a working example. The mojoPortal site itself uses a similar menu system so you can use it as an example also.

Edit: We have noticed a lot people calling this type of menu "multiple levels of tabs" or "multiple rows of tabs" so we decided to include those phrases here.

To achieve this style of menu, you must add a few controls to your layout.master file.

Place this code under the HTML <form> tag with the other SiteMapDataSource controls.

<asp:SiteMapDataSource ID="level3datasource" runat="server" ShowStartingNode="false" />

Change the PageMenu control to the following and then move it to the desired location within the layout.master file. This control will show 2nd tier pages.

<portal:PageMenu id="PageMenu1" runat="server" TopLevelOnly="true"
      UseTreeView="false" HideMenuOnSiteMap="false" UseSpanInLinks="true"
      Direction="Horizontal" DynamicDisplayLevels="0" />

Finally, add a second PageMenu control. This control will show 3rd tier and lower pages.

<portal:PageMenu id="PageMenu2" runat="server"
         UseTreeView="true" TreeViewShowExpandCollapse="true"
         StartingNodeOffset="2"  SiteMapDataSource="level3datasource" />

For skinning of the menu, please refer to the stylemenu.css file in the andreasviklund-02 or i7media-2horizontalmenus skins. You can also study the layout.master of andreasvicklund-02 for more details. andreasvicklund-02-alt1 takes it even further with 3 levels of horizontal menus and then a vertical menu for pages deeper than 3 levels.

Created: 2010/03/18 -- Joe Davis of i7MEDIA
Updated: 2009-11-15 -- Joe Davis
Updated: 2010-11-21 -- Joe Davis

i7MEDIA: Elegant mojoPortal Solutionsi7MEDIA, LLC offers Custom Skinning Services for mojoPortal. Trusted by the mojoPortal community and founded by mojoPortal Community Manager, Joe Davis, i7MEDIA is your source for elegant mojoPortal solutions.

Rate this Content 9 Votes