mulit level drop down menu using razor in umbraco

mark firth 32 posts 75 karma points

Aug 15, 2011 @ 11:38

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

$(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>

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

Copy Link

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

Aug 15, 2011 @ 13:09

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>

Copy Link

marmar 35 posts 28 karma points

Feb 13, 2012 @ 02:34

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>

Copy Link

Martin Willis 7 posts 81 karma points

Feb 13, 2012 @ 06:13

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>

Copy Link

Lars Ljungqvist 14 posts 34 karma points

Aug 26, 2013 @ 14:08

It works fine, thanks for the tutorial!

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?

Mulit Level Drop down Menu using Razor in Umbraco