This is part 3 in a series of how to make a sites page and sub-site links show in a second row in the top nav. Here are links to part one and part two.
My second post was a pure CSS solution for how to create the second row. It is by far the easiest of the three options. However it does not highlight the page that you are currently on. Hence the need for third solution.
We could write some JavaScript to detect any top nav links that have a HREF that matches the current page in the URL (part 4?) but for now lets let SharePoint do all of the work. By default SharePoint highlights the current site in the top nav and the current page in the left nav. So this solution is to simply move the left nav up under the top nav. To do this open up the master page of your site and find the following code in the left panel:
Cut and paste it higher on the page underneath the Top Nav Bar Placeholder. Then find the Orientation property in the ASPMENU control that was moved and change it from Vertical to Horizontal.
My second post was a pure CSS solution for how to create the second row. It is by far the easiest of the three options. However it does not highlight the page that you are currently on. Hence the need for third solution.
We could write some JavaScript to detect any top nav links that have a HREF that matches the current page in the URL (part 4?) but for now lets let SharePoint do all of the work. By default SharePoint highlights the current site in the top nav and the current page in the left nav. So this solution is to simply move the left nav up under the top nav. To do this open up the master page of your site and find the following code in the left panel:
<SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">
<Template_Controls>
<asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ShowStartingNode="False" id="QuickLaunchSiteMap" StartingNodeUrl="sid:1025" runat="server" />
</Template_Controls>
</SharePoint:DelegateControl>
<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Vertical" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0" SkipLinkText="" CssClass="s4-ql" />Cut and paste it higher on the page underneath the Top Nav Bar Placeholder. Then find the Orientation property in the ASPMENU control that was moved and change it from Vertical to Horizontal.
Orientation="Horizontal"
Set both the Top Nav and the Left Nav controls to have two Static Display levels and zero Dynamic levels.
StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0"
This means that they show pages and sub-sites but they do not create fly-out navs. If you want fly-out navs you can make the MaximumDynamicDisplayLevels value something higher than zero.
To make this solution work best you will want to go to the Navigation Settings page “/_layouts/AreaNavigationSettings.aspx” and for the current navigation settings choose: “Display only the navigation items below the current site.” That way the second row will not show the current site name.
Enjoy.
