More in this section

Forums / Developing with Sitefinity / guideline to build a navigation menu similar to sitefinity.com

guideline to build a navigation menu similar to sitefinity.com

11 posts, 0 answered
  1. mzerbib
    mzerbib avatar
    10 posts
    Registered:
    04 Sep 2006
    12 Sep 2011
    Link to this post
    Hi,

    I'm wondering how to create a master page with a top horizontal navigation similar to sitefinity.com
    - what kind of control should we use?
    - how to bind it to the Sitemap if this is not a "navigation control"?
    - how to embed links from the Sitemap into HTML layout such as the Solution Dropdown.

    has anybody succeeded in replicating this nice work?

    thanks

    Michael
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    28 Aug 2017
    15 Sep 2011
    Link to this post
    Hi Mzerbib,

    For the navigation menu on www.sitefinity.com we are using a customized version of RadMenu in a Mega Drop Down application scenario.  Please find attached below  a small sample for the Mega menu.

    Only the first level of the pages is being bound. Then each page is checked and  we create a child menu item containing RadSiteMap with the child pages of the current node.The sample uses the Sitefinity API to instantiate templates and generic container from *.ascx file. Once the template in the generic container is instantiated we add the generic container as child control of a RadMenuItem.
    To use the custom template, please do the following:

    1) Extract the content of the archive in your project and build it.
    2) Add a navigation control on the page. Choose horizontal with drop-downs and set it as in the attached image.



    Regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Paul Smith
    Paul Smith avatar
    14 posts
    Registered:
    06 Mar 2006
    19 Apr 2012
    Link to this post
    Hi,

    I'm trying to get the above sample working with SF5 and it doesn't seem to work. End up with errors when rendering
    Could not find the sitemap node with URL '~/home'.

    Should this work with SF5?

    Thanks

  4. Paul Smith
    Paul Smith avatar
    14 posts
    Registered:
    06 Mar 2006
    19 Apr 2012
    Link to this post
    Duplicate, please delete.

  5. Dan
    Dan avatar
    2 posts
    Registered:
    04 Apr 2009
    03 May 2012
    Link to this post
    Paul, 

    Running into the same issue running Sitefinity 5.0.  Were you able to resolve the "~/home" error?
  6. Paul Smith
    Paul Smith avatar
    14 posts
    Registered:
    06 Mar 2006
    04 May 2012
    Link to this post
    I've been told that it should work. However I was unable....
    One suggestion I was given was to switch the SiteMapProvider in the itemnavigation control to a SitefinitySiteMapProvider and that got me past that error. However the SitefinitySiteMapProvider doesn't seem to like ~/ url's so I had to Page.ResolveUrl them. And it seems to work.

    Still tweaking/testing though

    One other thing I found was that if you have Group menu items at the top level them e.item.url will always return an empty string thus not filtering your child items. I had to cast the dataitem as a PageSiteNode and get the URL off that.

    Hope that helps
  7. Dan
    Dan avatar
    2 posts
    Registered:
    04 Apr 2009
    05 May 2012
    Link to this post
    Paul, 
    I was able to get mine up and running by tweaking the following method from the example:
    void MegaMenuTemplate_IsNodeAccessible(object sender, IsAccessibleArgs e)
         {
             var pageNode = e.Node as PageSiteNode;
             if (pageNode != null)
             {
                 if (!pageNode.ShowInNavigation ||
                     (!pageNode.IsGroupPage && pageNode.Hidden) ||
                     (String.IsNullOrEmpty(pageNode.Title) && // used in multilingual; captures the cases of synced, split, and group pages
                         pageNode.Id != SiteInitializer.FrontendRootNodeId)) // ensures that the root node is not hidden and thus all other pages
                 {
                     e.IsAccessible = false;
                     return;
                 }
     
                 //The page should be hidden if it is a group page and it has no child pages.
                 if (pageNode.IsGroupPage && pageNode.ChildNodes.Count < 1)
                 {
                     e.IsAccessible = false;
                     return;
                 }
             }
             else
             {
                 throw new NotSupportedException("The supported types are 'TaxonSiteNode' or 'PageSiteNode'.");
             }
     
             e.IsAccessible = true;
         }

    However know when I use the Search at the top of my site it won't redirect to the search results page.

    Good luck!!
  8. Nancy
    Nancy avatar
    35 posts
    Registered:
    10 Apr 2012
    14 May 2012
    Link to this post
    I am using Sitefinity 5 and I just tried this using Boyan's instructions:
    1) Extract the content of the archive in your project and build it.
    2) Add a navigation control on the page. Choose horizontal with drop-downs and set it as in the attached image.

    I don't get the ~/home error. I get a different error about object reference not set to instance of an object.

    Here is the error info.
    Object reference not set to an instance of an object.
     
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
     
    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
     
    Source Error:
     
    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
     
    Stack Trace:
     
     
    [NullReferenceException: Object reference not set to an instance of an object.]
       Telerik.Web.UI.ControlItem.PopulateFromDataItem(PropertyDescriptorCache properties, Object dataItem, String dataMember, Int32 depth) +332
       Telerik.Web.UI.NavigationItem.PopulateFromDataItem(PropertyDescriptorCache properties, Object dataItem, String dataMember, Int32 depth) +55
       Telerik.Web.UI.RadSiteMapNode.PopulateFromDataItem(PropertyDescriptorCache properties, Object dataItem, String dataMember, Int32 depth) +30
       Telerik.Web.UI.ControlDataBinder.BindItem(IList items, Object dataObject, Object dataItem, String dataMember, Int32 depth) +111
       Telerik.Web.UI.ControlDataBinder.BindToEnumerableData(IEnumerable dataSource) +136
       Telerik.Web.UI.ControlDataBinder.BindToEnumerableData(IEnumerable data, String dataFieldID, String dataFieldParentID) +112
       Telerik.Web.UI.HierarchicalControlItemContainer.PerformDataBinding(IEnumerable data) +662
       System.Web.UI.WebControls.DataBoundControl.OnDataSourceViewSelectCallback(IEnumerable data) +170
       System.Web.UI.WebControls.DataBoundControl.PerformSelect() +267
       Telerik.Sitefinity.Web.UI.NavigationControls.Breadcrumb.Breadcrumb.OnPreRender(EventArgs e) +40
       System.Web.UI.Control.PreRenderRecursiveInternal() +154
       System.Web.UI.Control.PreRenderRecursiveInternal() +239
       System.Web.UI.Control.PreRenderRecursiveInternal() +239
       System.Web.UI.Control.PreRenderRecursiveInternal() +239
       System.Web.UI.Control.PreRenderRecursiveInternal() +239
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3913
     
    Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.272
    If you wish to reply with any advice, please be very specific about what I need to do, for example, do I make a change in one of  the files or in the configuration window for the nav control. Thanks for your help.
  9. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    14 May 2012
    Link to this post
    You didn't mention the Template location, so on the offchance...

    MegaMenuTemplate.ascx.cs contains an explicit path reference the item (drop-down) template, which should be adapted to your site.

    TemplatePath = "~/ControlTemplates/ItemTemplate.ascx",
  10. Nancy
    Nancy avatar
    35 posts
    Registered:
    10 Apr 2012
    14 May 2012
    Link to this post
    I am using the same structure. The template lives at "~/ControlTemplates/ItemTemplate.ascx". I did notice that the ItemTemplate file that I downloaded in the zip file only contains 3 lines of code.
    <%@ Control Language="C#" AutoEventWireup="true" %>
    <telerik:RadSiteMap runat="server" ID="RadSiteMap1" DataSourceID="siteMapDataSource1"></telerik:RadSiteMap>
    <asp:SiteMapDataSource runat="server" ID="siteMapDataSource1" />
    Is that how it is supposed to be?
  11. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    14 May 2012
    Link to this post
    That's correct - this application of the mega-menu modifies the item template at run-time. I actually modified this behaviour to suit my own needs, which was to have a fixed-layout dropdown for some sections, and standard dropdowns for other sections, but it depends on your site's needs.

    I guess the obvious step in your case would be to to run it from VS and break-point it at the ItemDataBound event (triggered by the level-1 items) and then step through it to find the missing object reference.
11 posts, 0 answered