More in this section

Forums / Developing with Sitefinity / Creating a simple menu

Creating a simple menu

5 posts, 0 answered
  1. Iain
    Iain avatar
    26 posts
    Registered:
    29 Dec 2010
    24 Jun 2011
    Link to this post
    Morning,

    I searched the forum for a simple step by step guide of how to create a custom control for a menu but couldnt find anything so apologies if this is a regular post.

    All I need is to create a UL > LI type menu bound to the SF menu, I'm sure this is very simple with a repeater but Im unable to find a starting point or tutorial.

    Thanks in advance

    Iain
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    24 Jun 2011
    Link to this post
    Hello Iain,

    You can create a template for NavigationControl where in your template declare BaseDataBoundControl like Repater. Then you only have to set the template to the control and it will be automatically bound.

    Regards,
    Ivan Dimitrov
    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. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    01 Sep 2011
    Link to this post
    Ivan,

    While that solution works, we have a huge site with many different uses of the navigation widget. How would one make a custom widget where those settings are pre-added? (i.e. not requiring each user to enter in advanced settings)
  4. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
  5. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    01 Sep 2011
    Link to this post
    there is a free marketplace solution that might be worth looking into: CleanNav Control

    However, I needed something similar to this a while back, and ended up using a simple stringbuilder to build out the menu tree using pages pulled from the Fluent API.

    Here's the snippet I used. I just wrote the final string to a literal control on the front end.

    Not the most elegant solution, and you'll probably have to modify this to better suit your needs, as it only does the root menu and the first child menus (that's all I needed on my menu).

    Additionally you'll likely need to create or install separate javascripts or jQuery plugins to handle the show/hide menus.

    protected void Page_Load(object sender, EventArgs e)
    {
        // initialize string builder
        var sb = new StringBuilder();
        sb.Append("<ul>");
        // intialize fluent API
        using (var app = App.WorkWith())
        {
            // get pages
            var pages = app.Pages().LocatedIn(Telerik.Sitefinity.Fluent.Pages.PageLocation.Frontend).ThatArePublished().Where(p => p.Parent.Title == "Pages" && p.ShowInNavigation == true).OrderBy(p => p.Ordinal).Get();
            var last = pages.Last().Title;
            // loop through pages
            foreach (var page in pages)
            {
                // skip home page
                if (page.Title == "Home") continue;
                // is this the current section?
                var selectedCss = Request.RawUrl.ToLower().StartsWith(string.Concat("/", page.UrlName)) ? "active " : "";
                // is this the last section?
                if (page.Title == last) selectedCss = string.Concat(selectedCss, "end");
                // append top-level link
                sb.AppendFormat("<li class=\"rootlink\"><a class=\"navlink {2}\" href=\"{0}\">{1}</a>", ResolveUrl(page.GetFullUrl()), page.Title, selectedCss);
                // create submenu
                sb.Append("<div class=\"submenu\">");
                sb.Append("<ul>");
                // retrieve subpages
                var subpages = app.Pages().LocatedIn(Telerik.Sitefinity.Fluent.Pages.PageLocation.Frontend).ThatArePublished().Where(p => p.Parent != null).Where(p => p.Parent.Title == page.Title && p.ShowInNavigation == true).OrderBy(p => p.Ordinal).Get();
                // loop through subpages        
                if (subpages.Count() > 0)
                {
                    foreach (var subpage in subpages)
                    {
                        // append link
                        sb.AppendFormat("<li><a href=\"{0}\">{1}</a></li>",ResolveUrl(subpage.GetFullUrl()), subpage.Title);
                    }
                }
                // close menu
                sb.Append("</ul>");
                  
                // close submenu
                sb.Append("</div></li>");
            }
            // close main menu
            sb.Append("</ul>");
        }
        // render html
        NavHtml.Text = sb.ToString();
    }

    Hope this was helpful!
5 posts, 0 answered