mulit level drop down menu using razor in umbraco

mark firth 32 posts 75 karma points

Jul 29, 2011 @ 16:39

Mulit Level Drop down Menu using Razor in Umbraco

Hi, I am trying to build a multi-level dropdrown menu, I'm using umbraco cms.

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

And in Umbraco I have created cshtml for it to work :

<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

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