Creating a simple menu
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
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
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)
For what it is worth, this question is also related to this one:
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/developing-with-sitefinity/simple-ul-gt-li-gt-a-list-of-pages.aspx
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();