mulit level drop down menu using razor in umbraco

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

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

0

It works fine, thanks for the tutorial!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?