Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • mark firth 32 posts 75 karma points
    Aug 15, 2011 @ 11:38
    mark firth
    0

    Mulit Level Drop down Menu using Razor in Umbraco

    Hi, I am trying to build a multi-level dropdrown menu using Razor, There are loads of example for XSLT out there but I cant find a relevant example for using dropdown menus using Razor..

    What I am looking for is something like which works perfectly in html

    <script type="text/javascript">
                     $(document).ready(function () {
                         $('.myMenu > li').bind('mouseover', openSubMenu);
                         $('.myMenu > li').bind('mouseout', closeSubMenu);
                         function openSubMenu() {
                             $(this).find('ul').css('visibility', 'visible');
                         };
                         function closeSubMenu() {
                             $(this).find('ul').css('visibility', 'hidden');
                         };
                     });
    </script>
    <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:
    <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

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Aug 15, 2011 @ 13:09
    Dan Diplo
    0

    I think what you really want is the sub-nodes of each of your top-level nodes. So something like this should work:

    <ul class="myMenu">
        <li><a href="/">Home</a> </li>
        @foreach (var page in @Model.AncestorOrSelf(1).Children)
        {
            string style = "";
            if (Model.Id == page.Id) { style = "class=\"current\""; }
            <li>
                <a href="@page.Url" @Html.Raw(style)>@page.Name</a>
    
                @if (page.Childen != null && page.Children.Count() > 0)
                {
                    <ul>
                    @foreach (dynamic secondPage in page.Children)
                 {
                        <li>
                     <a href="@secondPage.Url">@secondPage.Name</a>
                        </li>
                    }
                    </ul>
                }
            </li>
        }
    </ul>
  • marmar 35 posts 28 karma points
    Feb 13, 2012 @ 02:34
    marmar
    0

    This code does work for getting child nodes, but it does not highlight the current page for children that you are viewing.

    I have tried some recursive syntax, but it seems to be too complex. usually giving me errors with non-declaritive value.

    possibly a parameter that I am missing, but i cannot seem to find out where.

     

    Does anyone have any suggestions with the current code that is part of this thread?

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

                @if (page.Childen != null && page.Children.Count() > 0)
                {
                   
    <ul>
                    @foreach (dynamic secondPage in page.Children)
                     {
                       
    <li>
                             
    <ahref="@secondPage.Url">@secondPage.Name</a>
                       
    </li>
                    }
                   
    </ul>
                }
           
    </li>
        }
    </ul>
  • Martin Willis 7 posts 81 karma points
    Feb 13, 2012 @ 06:13
    Martin Willis
    0

    marmar you should be able to use this : 

     

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

                @if (page.Childen != null && page.Children.Count() > 0)
                {
                   
    <ul>
                    @foreach (dynamic secondPage in page.Children)
                     {
    if (Model.Id == secondPage.Id) { style = "class=\"current\""; }
                       
    <li>
                             
    <ahref="@secondPage.Url" @Html.Raw(style)>@secondPage.Name</a>
                        </li>
                    }
                   
    </ul>
                }
           
    </li>
        }
    </ul>

     

  • Lars Ljungqvist 14 posts 34 karma points
    Aug 26, 2013 @ 14:08
    Lars Ljungqvist
    0

    It works fine, thanks for the tutorial!

Please Sign in or register to post replies

Write your reply to:

Draft