mojoPortal

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 runat="server"
	ID="PageMenu1"
	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 runat="server"
	ID="PageMenu2"
	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.