dropdown menu with special style of last item

RunnicFusion 62 posts 145 karma points

Sep 19, 2012 @ 15:26

Dropdown menu with special style of last item

Hello,

I'm a little bit stuck on coding the menu structure of my website.
The menu has to do the following:

when there are 4 items (te maximum of the menu) it has to create a different class in the li tag.
The menu also have a dropdown (menu is horizontal and has on the root a dropdown, 1 level deep

I allready have to following code: (1047 is the root of the document tree). how to make it work?

<ul id="nav">
@if (@Model.NodeById(1047).Children.Where("umbracoNaviHide!= true").Count() == 4)
{
foreach (var item in @Model.NodeById(@Parameter.NodeID).Children.Where("umbracoNaviHide!= true"))
  {
<text>
<li>
  <a href="#" title="minder">
  @Model.NodeById(1049).Name
  </a>
  </li>
</text>
}
}
@if (@Model.NodeById(@Parameter.NodeID).Children.Where("umbracoNaviHide!= true").Count() < 4)
{
foreach (var item in @Model.NodeById(@Parameter.NodeID).Children.Where("umbracoNaviHide!= true"))
  {
<text>
<li>
  <a href="#" title="meer">
  @Model.NodeById(@Parameter.NodeID).Name
  </a>
</li>
</text>
}
}
</ul>

Thanks for your help!

Copy Link

RunnicFusion 62 posts 145 karma points

Sep 19, 2012 @ 16:08

Have now the following code, seems to be working but i don't get my class on the last item:

<ul id="nav">
  @if (@Model.NodeById(1049).Children.Where("umbracoNaviHide!= true").Count() < 3)
  {
    foreach (var item in @Model.NodeById(1047).Children.Where("umbracoNaviHide!= true"))
      {
         <text>
            <li>
              <a href="@item.Url" title="@item.Name">
                @item.Name
              </a>
           </li>
         </text>
      }
  }

@if (@Model.NodeById(1049).Children.Where("umbracoNaviHide!= true").Count() == 3)
  {
     foreach (var item in @Model.NodeById(1047).Children.Where("umbracoNaviHide!= true"))
       {
         <text>
           <li>
             <a href="@item.Url" title="@item.Name">
               @item.Name Lst
             </a>
           </li>
         </text>
       }
  }
</ul>

Copy Link

Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib

Sep 19, 2012 @ 16:46

You can use the IsLast() method on a DynamicNode to determine if it is the last item in a collection:

eg.

foreach (var item in @Model.NodeById(1047).Children.Where("Visible"))
{
        <text>
        <li class="@item.IsLast("last")">
          <a href="@item.Url" title="@item.Name">
            @item.Name
          </a>
       </li>
       </text>
}

The above will add the class "last" to the last item. Also note you can use Where("Visible") instead of Where("umbracoNaviHide!= true").

See: http://umbraco.com/follow-us/blog-archive/2011/9/18/umbraco-razor-feature-walkthrough%E2%80%93part-7.aspx

Copy Link

RunnicFusion 62 posts 145 karma points

Sep 20, 2012 @ 15:52

Thanks, te following code is working for me, but how to do the dropdown items? (allready included, no errors but not working)

<ul id="nav"> 

@foreach (var item in @Model.NodeById(1047).Children.Where("umbracoNaviHide!= true"))
{
        <li class="@item.IsLast("laatsteitem")">
          <a href="@item.Url" title="@item.Name">
            @item.Name
          </a> 

         @if (@Model.NodeById(1047).Children.Where("umbracoNaviHide!= true").Count() > 1)
          {
           <text>
            <ul>
            foreach(var item in Model.Children)
              {
                  <li><a href="@item.Url">@item.Name</a></li>
              }
            </ul>
           </text>
           }
 
       </li>
}
</ul>

When i change

foreach(var item in Model.Children)

to

@foreach(var item in Model.Children)

I get a error:

error CS0136: A local variable named 'item' cannot be declared in this scope because it would give a different meaning to 'item', which is already used in a 'parent or current' scope to denote something else

How to solve this problem?

Copy Link

Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib

Sep 20, 2012 @ 16:50

Use a different variable name than "item" in your second loop. ie.

foreach(var subitem in Model.Children)
{
    <li><ahref="@subitem.Url">@subitem.Name</a></li>
}

Copy Link

RunnicFusion 62 posts 145 karma points

Sep 20, 2012 @ 17:12

Thank i have the folowwing code, but something is wrong with the } (missing??)

<ul id="nav">
  @foreach (var item in @Model.NodeById(1047).Children.Where("umbracoNaviHide!= true"))
  {
    <li class="@item.IsLast("laatsteitem")">
      <a href="@item.Url" title="@item.Name">
        @item.Name
      </a>
    @if (@Model.NodeById(1047).Children.Where("umbracoNaviHide!= true").Count() > 1)
    {
      <ul>
        @foreach(var subitem in Model.Children)
        {
           <li><a href="@subitem.Url">@subitem.Name</a></li>
        }
      </ul>
    }
    </li>
  }
</ul>

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?

Dropdown menu with special style of last item