Customize the QuickLaunch menu and show it on top of the site as TopNavigation menu

  • Article

Once I got an interesting question from our internal discussions about whether we can show the QuickLaunch menu on top of the site as how TopNavigation menu bar look like. The requirement is given below.

clip_image002

The left navigation menu (<SharePoint:AspMenu id="QuickLaunchMenu" DataSourceId="QuickLaunchSiteMap" /> ) has been implemented in the default.master (for teamsites) and you can see the control tags in the default.master page.

If we want to show the QuickLaunch menu on top of the site with menus then we can change the Orientation to Horizontal and we can put that control on top. We can use SharePoint designer to do this easily or we can take a copy of default.master page and then modify it in any text editor and upload it to your site with a custom name.

You will get the default.master page from the following location. C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\GLOBAL

Then the view would be something like this.

clip_image004

Here is the control tag for implementing the quicklaunch menu with menu driven navigation. Please do the highlighted changes.

<Sharepoint:SPNavigationManager id="QuickLaunchNavigationManager" runat="server"

                        QuickLaunchControlId="QuickLaunchMenu"

                        ContainedControl="QuickLaunch"

                        EnableViewState="false" >

                        <div>

                              <SharePoint:DelegateControl ID="DelegateControl1" 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="QuickLaunchMenu"

                              DataSourceId="QuickLaunchSiteMap"

                              runat="server"

                              Orientation="Horizontal"

                              StaticDisplayLevels="1"

                              ItemWrap="true"

                              MaximumDynamicDisplayLevels="1"

                              StaticSubMenuIndent="0"

                              SkipLinkText=""

                              >                             

                              <StaticMenuStyle/>

                        <StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>

                        <StaticSelectedStyle CssClass="ms-topnavselected" />

                        <StaticHoverStyle CssClass="ms-topNavHover" />

                        <DynamicMenuStyle BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>

                        <DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>

                        <DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>

                        <DynamicSelectedStyle CssClass="ms- topNavFlyOutsSelected"/>                                  

</SharePoint:AspMenu>

                        </div>

                        </Sharepoint:SPNavigationManager>