Question

I am trying to build a multi-level dropdrown menu, I’m using umbraco cms.

What I am looking for is something like :

<div id="TopMenu"> 
        <ul class="myMenu"> 
            <li><a href="#">Home</a></li> 
            <li><a href="#">About Us</a></li> 
            <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Products1</a></li>
                        <li><a href="#">Products2</a></li>
                        <li><a href="#">Products3</a></li>
                    </ul>
                    </li> 
            <li><a href="#">ContactUs</a></li> 

        </ul> 
    </div><!--TopMenu--> 

And in Umbraco I have created cshtml for it to work :

<ul class="myMenu">
<li><a href="/">Home</a> </li>
@foreach (var page in @Model.AncestorOrSelf(1).Children)
{
    string style = "";
    if (1 == 1) { style = "class=\"current\""; }
    <li><a href="@page.Url" @style>@page.Name</a></li>


}

The Above razor syntax works fine for AncestorOrSelf(1) which is Top level , but i need sub nodes for products which is AncestorOrSelf(2), Does any one knows how to acheive this

Thanx

Answer 1

This is the razor code I’m currently using in my project:

@foreach (var page in Model.AncestorOrSelf(1).Children.Where("Visible"))
{
   <li><a href="@page.Url">@page.Name</a>
   if (page.Children.Where("Visible").Count() > 0)
   {
      <ul>
         @foreach (var subpage in page.Children.Where("Visible"))
         {
            <li><a href="@subpage.Url">@subpage.Name</a></li>
         }
      </ul>
   }
   </li>
}

The inner loop cycles through all the children of the outer loop’s node.