(Sitecore) Navigation with Subnavigation - menu

Question

I'm trying to build main navigation with drop down subnavigation menu anchors. I got the HTML with CSS ready, but I don't know how to do it in the sublayout and its code behind.
I have done a lot of navigations, but those were all 1-dimensional menus using asp:repeaters or asp:ListViews.
Can anyone point me to the right direction?

Answer 1

Essentially you will want to have nested repeaters on the number of levels (or "dimensions") you want to display on your navigation. See an example below.
<asp:Repeater runat="server" ID="TopNavRepeater" OnItemDataBound="TopNavRepeater_OnItemDataBound">
<ItemTemplate>
<sc:Link runat="server" ID="sclTopLink" Field="__Display Name" />
<asp:Repeater runat="server" ID="SecondNavRepeater" OnItemDataBound="SecondNavRepeater_OnItemDataBound">
<ItemTemplate>
<sc:Link runat="server" ID="sclSecondLink" Field="__Display Name" />
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
You will want to get the children of each Item bound to the Top Repeater and bind it to the second Repeater. Use Sitecore Link Controls to render the links to the pages by settings the Items, and Fields, on the OnItemDataBound event.
See below for a rough example
protected void Page_Load(object sender, EventArgs e)
{
TopNavRepeater.DataSource = YourHomeItem.Children();
TopNavRepeater.DataBind();
}
protected void TopNavRepeater_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
var item = e.Item.DataItem as Item;
if (item == null)
return;
var sclTopLink = e.Item.FindControl("sclTopLink") as Link;
var SecondNavRepeater = e.Item.FindControl("SecondNavRepeater") as Repeater;
if (sclTopLink != null)
{
sclTopLink.Item = item;
}
if (SecondNavRepeater != null)
{
SecondNavRepeater.DataSource = item.Children;
SecondNavRepeater.DataBind();
}
}
}