Hi Tom,

If you go to the developer section and open up the Partial View Macro and click on create then you will see the templates for creating menu system. The same goes for the Partial views in the settings section.

But here is a starting point

@inherits Umbraco.Web.Macros.PartialViewMacroPage


@*
    Macro to display child pages below the root page of a standard website.
    Also highlights the current active page/section in the navigation with
    the css class "current".
*@

@{
    @* Get the root of the website *@
    var root = CurrentPage.AncestorOrSelf(1);
}

<ul>
    @foreach (var page in root.Children.Where("Visible"))
    {
        <li class="@(page.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
            <a href="@page.Url">@page.Name</a>
        </li>
    }
</ul>

Hope this helps,

/Dennis

Yes, I see that thanks so much.  That worked!  Very nice!

I did not see a template pull down menus.  Can you direct me with this please?

Thanks

Hi Tom

When you open up the Partial View Macro in developer section you can hover the mouse on the folder name called Partial views marco then you will see three dots, if you click on the three dots, then you will see a dialog where you can create a new file, then you will see the UI, like my picture above.

Hope this make sense and helps,

/Dennis

I'm sorry Dennis.  Yes I see the drop down with the image you provided.

I meant to ask how would I go about creating a Parent/Children navigation?  For me, what I'd like to do, is when I hover over a menu item, it automatically shows its childern in a list under the parent.  Do you knoie how I might go about this?

Arrh okay Tom, sorry that I misunderstood you.

I think that something like this should do what you are asking for. Else it can be a nice starting ponit for you to modify the code so it match your content struture.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ var home = CurrentPage.AncestorOrSelf(1); }

@if (home.Children.Any())
{
    @* Get the first page in the children *@
    var naviLevel = home.Children.First().Level;

   

    
    
    @* Add in level for a CSS hook *@
    <ul class="level-@naviLevel">            
        @* For each child page under the home node *@
    
        @foreach (var childPage in home.Children)
        {   
            if (childPage.Children.Any())
            {                    
                <li class="has-child @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                        <a href="#">@childPage.Name</a>
                </li>
            } 
            else
            {
                <li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                    <a href="@childPage.Url">@childPage.Name</a>
                </li>
            }            
        }
    </ul>
}

@helper childPages(dynamic pages)
{
    @* Ensure that we have a collection of pages *@
    if (pages.Any())
    {
        @* Get the first page in pages and get the level *@
        var naviLevel = pages.First().Level;
        
        @* Add in level for a CSS hook *@
        <ul class="sublevel level-@(naviLevel)">
            @foreach (var page in pages)
            {
                <li>
                    <a href="@page.Url">@page.Name</a>
                    
                    @* if the current page has any children *@
                    @if (page.Children.Any())
                    {                        
                        @* Call our helper to display the children *@
                        @childPages(page.Children)
                    }
                </li>
            }
        </ul>
    }
}

Hope this helps,

/Dennis

Thanks alot Dennis. I'm looking at your code now line by trying to understand it.  I'll let you know how it goes.

Tom
 

I see where you are defining the navigation as a TemplatePage and not Macro page.

Could I use a templatepage?

Hi Tom.

If you don´t know it yet Umbraco ships with some different starter kits.

Perhaps it would be nice for you to setup 2 different Umbraco installations, one with no starter kit where you are working with your site,

And another one where you install the Fanoe starter kit, where you can lean how to do things. In the Fanoe starter kit, the menu that you are asking for.And of course you are welcome to ask on the forum too.

Hope this could be a setup for you to learn Umbraco better.

/Dennis

Hi Tom,

Yeah you could use a partial view. When you are using a partial view the it inherts from (Settings --> partial views)

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

And when you are using Parial view macro it inherts from (Developer section --> partial view macros)

@inherits Umbraco.Web.Macros.PartialViewMacroPage

You can read about the partial view macro here https://our.umbraco.org/documentation/Reference/Templating/Macros/Partial-View-Macros/ and partial view here. https://our.umbraco.org/documentation/Reference/Mvc/partial-views

Your razor code can be used in both files. You need to use a partial view macro, if you want the user to be able to add a parameter when he or she insert a macro into the RTE for example

/Dennis

Dennis:

Thank you soi much for all your help!  Much appreciated.  Yes, I will install a second copy of Umbraco and the starter kit so I can walk though the examples.

But I'm curious of something.  I know about partial views and how to embed those in a master page.  I see where you made yours a TemplatePage.  So how would you associate your template page with a master page?

Thanks

Tom

Hi Tom,

If it a partial view then you can add the it to the master like this. Where the MainNavigation is the name of the Partial view.

@{Html.RenderPartial("MainNavigation");}

And if you are using partial view macros the you can add it to your your templates like this, again the MainNavigation is the name of the file.

@Umbraco.RenderMacro("MainNavigation")

Hope this make sense and  helps,

/Dennis

is working on a reply...