multi level menu

ds 191 posts 223 karma points

May 14, 2012 @ 09:21

I try to create multi level menu by using following code. It works but if there is ever more than one sub-nodes of that parent node, it only displays one sub-node. I am new at razor so I do not know whether that code in the following is true.

@inherits umbraco.MacroEngines.DynamicNodeContext
@{ 
  var level = String.IsNullOrEmpty(Parameter.Level) ? 1 : int.Parse(Parameter.Level); 
  @*var ulClass = String.IsNullOrEmpty(Parameter.UlClass) ? "" : String.Format(" class=\"{0}\"", Parameter.UlClass);*@ 
  var parent = @Model.AncestorOrSelf(level);
  if (parent != null) {
    <ul class="sf-menu">
      <li class="current"><a href="/">Anasayfa</a></li>
      @foreach (var item in parent.Children.Where("Visible")) {
        @* var selected = Array.IndexOf(Model.Path.Split(','), item.Id.ToString()) >= 0 ? " class=\"selected\"" : "";*@
        <li>
          <a href="@item.Url">@item.Name</a>                                                      
        @foreach (var item2 in item.Children.Where("Visible")) {
          <ul>                                                      
            <li><a href="@item2.Url">@item2.Name</a></li>          
          </ul>
          }                                                         
        </li>                                                               
      }
    </ul>
  }
}

As the output, I try to achieve something like this.

        <ul>
   <li class="current"><a href="/">HOME</a></li>
        <li><a href="/index-1.aspx">MENU-1</a></li>
        <li><a href="/index-2.aspx">MENU-2</a>
          <ul>
            <li><a href="#">MENU-2.1</a></li>
            <li><a href="#">MENU-2.2</a>
              <ul>
                <li><a href="#">MENU-2.2.1</a></li>
                <li><a href="#">MENU-2.2.2</a></li>
              </ul>
            </li>
            <li><a href="#">MENU-2.3</a></li>
            <li><a href="#">MENU-2.4</a></li>
          </ul>
        </li>
        <li><a href="/index-3.aspx">MENU-3</a></li>
        <li><a href="/index-4.aspx">MENU-4</a></li>
      </ul>

Copy Link

gilad 185 posts 425 karma points

May 14, 2012 @ 09:36

Hi.

what the output did you get now?

why did you comment the selected parmaeter?

Copy Link

ds 191 posts 223 karma points

May 14, 2012 @ 09:42

Under Menu-2, it should be displayed Menu-2.1 and Menu-2.2 but now only Menu-2.1 is displayed

        <ul>
        <liclass="current"><ahref="/">HOME</a></li>
        <li><ahref="/index-1.aspx">MENU-1</a></li>
        <li><ahref="/index-2.aspx">MENU-2</a>
          <ul>
            <li><ahref="#">MENU-2.1</a></li>
            <li><ahref="#">MENU-2.2</a></li>
          </ul>
        </li>
        <li><ahref="/index-3.aspx">MENU-3</a></li>
        <li><ahref="/index-4.aspx">MENU-4</a></li>
      </ul>

I commented cause I do not need it for now

Copy Link

gilad 185 posts 425 karma points

May 14, 2012 @ 09:50

Hi, ok, that good.

so you need to make another check and loop for third level..

you also need to move the <UL></UL> out from the loop.

try this:

@inheritsumbraco.MacroEngines.DynamicNodeContext
@{
  varlevel =String.IsNullOrEmpty(Parameter.Level)?1:int.Parse(Parameter.Level);
  @*varulClass =String.IsNullOrEmpty(Parameter.UlClass)?"":String.Format(" class=\"{0}\"",Parameter.UlClass);*@
  varparent =@Model.AncestorOrSelf(level);
  if(parent !=null){
    <ul class="sf-menu">
      <li class="current"><a href="/">Anasayfa</a></li>
      @foreach(varitem inparent.Children.Where("Visible")){
        @*varselected =Array.IndexOf(Model.Path.Split(','),item.Id.ToString())>=0?" class=\"selected\"":"";*@
        <li>
          <a href="@item.Url">@item.Name</a>
 @if ( item.Children.Where("Visible").Count > 0 )
 {
 <ul>
 @foreach (var item2 in item.Children.Where("Visible")) {
 <li><a href="@item2.Url">@item2.Name</a></li>
 @if ( item2.Children.Where("Visible").Count > 0 )
 {
 <ul>
 @foreach (var item3 in item2.Children.Where("Visible")) {
 <li><a href="@item3.Url">@item3.Name</a></li> 
 }
 </ul>
 }
 }
 </ul>
 }                                                                                                          
        </li>                                                               
      }
    </ul>
  }
}

Copy Link

ds 191 posts 223 karma points

May 14, 2012 @ 10:16

I got it work. I just fixed @if (item.Children.Where("Visible").Count() > 0).

Thanks

Copy Link

is working on a reply...

Flag this post as spam?

Multi Level Menu