SharePoint - Customize Quick Launch Menu - Asked By Mohammed Akhtar on 24-Nov-08 01:49 AM

I need to customize quick launch menu, and i've to change the entire look and feel of it, i 've created fly-out menu by setting staticdisplaylevels=1 and now i am getting the fly-outs menu but i don't want to show the largearrow image in the menu which is getting displayed as part of the menu.

Suppose the quicklaunch is as follows

  • Documents
  • Lists
  • News
  • ....
  • ....
  • ....
  • Some More Links.

I need to add an image before the documents,lists and news links. To do this i need to place image in another td. Is it possible to do so? If so, please tell me how to do it and i also need to remove the image(largearrowright.gif) that is generated as part of the fly-out menu. The quicklaunch image is given below



Thanks in Advance.

Read this - ram kumar replied to Mohammed Akhtar on 24-Nov-08 01:52 AM

You can modify the display of Quick Launch by modifying attributes of the navigation control specified in the default.master file of the deployment (Local_Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\GLOBAL). The default.master file is the Windows SharePoint Services master page that contains templates for site page layout, including the template for the left navigational area used in SharePoint pages.

The master page includes templates for two controls that by default are available for implementation on the Home page, a Microsoft.SharePoint.WebControls.Menu control, which displays the standard Quick Launch view used in the left navigational area, and a Microsoft.SharePoint.WebControls.SPTreeView control, which displays a site folder view. You can select which view to display on site pages through the user interface.

To select which left navigational control to display on site pages
Click Site Actions and on the Site Settings page in the Look and Feel section, click Tree view.

Select Enable Quick Launch to display the Quick Launch view, or select Enable Tree View to display a folder view.

As an example of a customization that you can make to left navigation, you can collapse Quick Launch and add fly-out menus to the view by setting attributes on the Menu control. This kind of customization requires that you either customize the originally installed default.master file through a SharePoint-compatible editing application such as Microsoft Office SharePoint Designer 2007, or that you create a custom .master file and use the Windows SharePoint Services object model to point a site to the new file.

To use SharePoint Designer to modify the default.master file instance in the site's Master Page Gallery to display a collapsed view with fly-out menus
Click Site Actions, click Site Settings, and then in the Galleries section of the Site Settings page, click Master pages.

On the Master Page Gallery page, click Edit in Microsoft Office SharePoint Designer on the drop-down menu.

In Code view, find the ContentPlaceHolder container control whose ID is PlaceHolderLeftNavBar. Within the PlaceHolderLeftNavBar control, find the AspMenu control whose ID is QuickLaunchMenu.

Set both the StaticDisplayLevels and MaximumDynamicDisplayLevels values of the Menu control to 1, as follows:

<asp:AspMenu
  id="QuickLaunchMenu"
  DataSourceId="QuickLaunchSiteMap"
  runat="server"
  Orientation="Vertical"
  StaticDisplayLevels="1"
  ItemWrap="true"
  MaximumDynamicDisplayLevels="1"
  StaticSubMenuIndent="0"
  SkipLinkText=""
>Save the file and open a site page to see the results of your changes.

To display a collapsed view with fly-out menus by creating a custom .master file and using the SharePoint object model
Copy the default.master file in the \12\TEMPLATE\GLOBAL folder and rename it, for example, myDefault.master.

Open your new myDefault.master file and find the ContentPlaceHolder container control whose ID is PlaceHolderLeftNavBar.

In the PlaceHolderLeftNavBar control, find the AspMenu control whose ID is QuickLaunchMenu, and then set both the StaticDisplayLevels and MaximumDynamicDisplayLevels values to 1, as follows:


<asp:AspMenu
  id="QuickLaunchMenu"
  DataSourceId="QuickLaunchSiteMap"
  runat="server"
  Orientation="Vertical"
  StaticDisplayLevels="1"
  ItemWrap="true"
  MaximumDynamicDisplayLevels="1"
  StaticSubMenuIndent="0"
  SkipLinkText=""
>To upload your myDefault.master file to the Master Page Gallery, click Site Actions, click Site Settings, and in the Galleries section, click Master Pages. Click Upload on the Master Page Gallery page to browse to your myDefault.master file and upload it to the gallery.

Create a Web site in Microsoft Visual Studio and use the Microsoft.SharePoint.SPWeb.MasterUrl property to point the site to the custom .master file, as shown in the following example.

C# Copy Code
SPWeb oWebsite = SPContext.Current.Site.AllWebs["MyWebSite"];
oWebsite.MasterUrl = "/MyWebSite/_catalogs/masterpage/myDefault.master";
oWebsite.Update();
oWebsite.Dispose();
To run this example, you must add a Microsoft.SharePoint.WebControls.FormDigest control to the page that makes the post. For information about how to add a FormDigest control, see Security Validation and Making Posts to Update Data. The example also requires referencing and importing the Microsoft.SharePoint and Microsoft.SharePoint.WebControls namespaces. For basic information about how to create a Web application that runs in the context of Windows SharePoint Services, see How to: Create a Web Application in a SharePoint Web Site.

Reset IIS for your changes to take effect and navigate to a site page to see the results of your changes.

Replacing the Menu Control with the TreeView Control
You can replace the AspMenu control with a SPTreeView control to display a familiar tree view with nodes that collapse and expand.

To replace the Menu control with the TreeView control
Copy the default.master file in the \12\TEMPLATE\GLOBAL folder and rename it, for example, myDefault.master.

Open your new myDefault.master file and find the ContentPlaceHolder container control whose ID is PlaceHolderLeftNavBar.

In the PlaceHolderLeftNavBar control, find the AspMenu control whose ID is QuickLaunchMenu.

Replace the AspMenu with an SPRememberScroll control that contains an SPTreeView control, such as the following example, which specifies that hierarchical outlines be displayed, expands the top three nodes by default, and increases vertical padding and indentation between node levels:


<SharePoint:SPRememberScroll
  runat="server"
  id="MyTreeViewRememberScroll"
  onscroll="javascript:_spRecordScrollPositions(this);"
  Style="overflow: auto;height: 400px;width: 150px; ">
  <Sharepoint:SPTreeView
    id="MyWebTreeView"
    runat="server"
    ShowLines="true"
    DataSourceId="TreeViewDataSource"
    ExpandDepth="3"
    SelectedNodeStyle-CssClass="ms-tvselected"
    NodeStyle-CssClass="ms-navitem"
    NodeStyle-HorizontalPadding="2"
    NodeStyle-VerticalPadding="5"
    SkipLinkText=""
    NodeIndent="20"
    ExpandImageUrl="/_layouts/images/tvplus.gif"
    CollapseImageUrl="/_layouts/images/tvminus.gif"
    NoExpandImageUrl="/_layouts/images/tvblank.gif">
  </Sharepoint:SPTreeView>
</Sharepoint:SPRememberScroll>To upload your myDefault.master file to the Master Page Gallery, click Site Actions, click Site Settings, and in the Galleries section, click Master Pages. Click Upload on the Master Page Gallery page to browse to your myDefault.master file and upload it to the gallery.

Run a code sample as in step five of the previous procedure to set myDefault.master as the .master file for a specified Web site.

Reset IIS for your changes to take effect and navigate to a site page to see the results of your changes.

Regards,

Rams

Menu - mv ark replied to Mohammed Akhtar on 24-Nov-08 03:21 AM

To avoid the PopOut arrowhead, set the property StaticEnableDefaultPopOutImage="False" (or DynamicEnableDefaultPopOutImage="False" for a submenu)

To replace the arrowhead with an image use the StaticPopOutImageUrl (or DynamicPopOutImageUrl for a submenu) property and specify a URL
I am done with Job - Mohammed Akhtar replied to mv ark on 25-Nov-08 02:15 AM

Dear MV ARK,

   I am thankful to you for your Help, as per your suggestion i have found the Solution for my Query. Once again thank you, and wish to here from you for any further assistance.

Kelly replied to ram kumar on 26-Jul-10 11:44 PM

I’ve noticed that the fly outs do not work on Datasheet views. In fact creating a datasheet view and then opening it in SharePoint designer crashes SPD.

do you know of any reason why this might be happening or how to fix this?