multi level menu

ds 191 posts 223 karma points

May 14, 2012 @ 09:21

Multi Level Menu

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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Multi Level Menu