locked
Customize Quick Launch Menu like drop down menu RRS feed

  • Question

  • Hye I am new to SharePoint. Currently i am using SharePoint 2010. I want to ask is that we customize the quick launch to look like tree view navigation where we can set our own nodes links, subheadings and heading? It means the quick launch menu should look somethings like belows. Hope someone can teach me how to do this customization?

    Monday, April 8, 2013 1:32 AM

Answers

  • The best way is, create a custom webpart and use asp.net tree view to get ay kind of navigation. If you url is dynamic and don't want to hardcode so create custom list and add links in that list. later you can get all links and bind with tree using object model.

    Please look into this blog for your ref:

    http://www.codeproject.com/Articles/32389/How-to-Use-TreeView-in-Current-Navigation-in-Share

    Let me know in case any issue


    Hemendra: "Yesterday is just a memory,Tomorrow we may never see"

    Whenever you see a reply and if you think is helpful, click "Alternate TextVote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Alternate TextMark As Answer

    Please feel free to unmark answer if does not resolves your problem.

    • Marked as answer by Entan Ming Monday, April 22, 2013 2:11 AM
    Monday, April 15, 2013 9:29 AM

All replies

  • Hi,

    There is no OOTB way to add treee view in quick launch so either you have to use jquery/javascript or custom solution to do this.

    Just look at below links for jquery:

    http://www.codefornuts.com/2010/05/custom-jquery-based-quick-launch.html

    http://chrisstahl.wordpress.com/2012/05/23/branding-the-quick-launch-in-sharepoint-2010-part-ii/

    MSDN ref for code:

    http://msdn.microsoft.com/en-us/library/ms466994.aspx

    Hope it could help


    Hemendra: "Yesterday is just a memory,Tomorrow we may never see"

    Whenever you see a reply and if you think is helpful, click "Alternate TextVote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Alternate TextMark As Answer

    Please feel free to unmark answer if does not resolves your problem.

    Monday, April 8, 2013 5:08 AM
  • Hi,

      As Hemendra replied, you can use javascripts with css to implement tree view structure on Quick Launch parts.

    For reference, go through the below link,

     http://www.programmingsolution.net/useful-js/jquery-treeview.php
    http://www.pedrera.com/blog/using-the-jquery-treeview-in-asp-net/


    Balaji -Please click mark as answer if my reply solves your problem.

    Monday, April 8, 2013 5:46 AM
  • Hi,

    I understand that you want to display your quick luck menu as tree view. You can realize that by 2 methods:

    1.Modify the master page:

    1. Go to site settingsàgalleryàmaster pages and page layouts
    2. Download a copy of v4.master
    3. Open and edit it
    4. Find <SharePoint:AspMenu id="V4QuickLaunchMenu" and delete all contents of the tag
    5. Add below code between <content template> tag:

    <SharePoint:SPHierarchyDataSourceControl

          id="MyTreeViewDataSource"

          runat="server" RootContextObject="Web"

          IncludeDiscussionFolders="true" />

    <SharePoint:SPRememberScroll

          id="MyTreeViewRememberScroll"

          runat="server" onscroll="javascript:_spRecordScrollPositions(this);"

          Style="height: 400px;width: 150px; ">

      <SharePoint:SPTreeView

            id="MyWebTreeView"

            runat="server"

            ShowLines="true"

            DataSourceId="MyTreeViewDataSource"

            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:SPRememberScroll>

      6.  Save as My.master and upload it to master page gallery. Then publish and approve it. If you want to set it as default master page, find it in SharePoint Designer and right click it, you can see the option.

    2.Disable quick launch and enable tree view: you can find the option in site actions>site settings> tree view.

    For more information, you can refer to this post: http://msdn.microsoft.com/en-us/library/ms466994(v=office.14).aspx

    If I have any misunderstandings, please feel free to let me know.

    Thanks,

    Kenon Yin

    Monday, April 8, 2013 6:09 AM
  • Hye Kenon Yin,

    Thanks for the reply.

    Is that we can add our own links, headings and subheadings in the custimozed tree view? It means that i want defined my own data on the tree view. Is that possible?


    Monday, April 8, 2013 6:52 AM
  • Hi Tharmendran Sukumaran,

    If you enable publishing feature and add custom link in left navigation then kenon solution should work.

    See this to enable publishing feature:

    http://office.microsoft.com/en-in/sharepoint-server-help/enable-publishing-features-in-sharepoint-2010-HA010378243.aspx

    Let us know your result


    Hemendra: "Yesterday is just a memory,Tomorrow we may never see"

    Whenever you see a reply and if you think is helpful, click "Alternate TextVote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Alternate TextMark As Answer

    Please feel free to unmark answer if does not resolves your problem.


    Friday, April 12, 2013 5:14 AM
  • Publishing is available in Standard and Enterprise editions.

    Please ensure that you mark a question as Answered once you receive a satisfactory response. This helps people in future when searching and helps prevent the same questions being asked multiple times.

    Friday, April 12, 2013 8:29 AM
  • Thanks for the reply but unfortunely i am using sharepoint foundation 2010 version where publishing unavailable. Is that any other we can customize the tree view with our own defined data? Thanks.
    Monday, April 15, 2013 9:19 AM
  • The best way is, create a custom webpart and use asp.net tree view to get ay kind of navigation. If you url is dynamic and don't want to hardcode so create custom list and add links in that list. later you can get all links and bind with tree using object model.

    Please look into this blog for your ref:

    http://www.codeproject.com/Articles/32389/How-to-Use-TreeView-in-Current-Navigation-in-Share

    Let me know in case any issue


    Hemendra: "Yesterday is just a memory,Tomorrow we may never see"

    Whenever you see a reply and if you think is helpful, click "Alternate TextVote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Alternate TextMark As Answer

    Please feel free to unmark answer if does not resolves your problem.

    • Marked as answer by Entan Ming Monday, April 22, 2013 2:11 AM
    Monday, April 15, 2013 9:29 AM