Copied to clipboard

Flag this post as spam?

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


  • Tom 161 posts 322 karma points
    Mar 13, 2015 @ 12:01
    Tom
    0

    How to Create a Dynamic Navigation Menu

    Hi:  I am new Umbraco and I just installed 7.x and I am using Razor syntax.

    I have read that there are templates for creating menu system but I can't find it.

    Anyway, I think a partial view might do the trick but I'm not sure.

    Can someone help?

    Note: I went through building a basic site but it hard codes the menu creation in the master.chtml.

     

    Thanks

     

    BTD

     

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 13, 2015 @ 12:17
    Dennis Aaen
    0

    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

  • Tom 161 posts 322 karma points
    Mar 13, 2015 @ 12:42
    Tom
    0

    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

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 13, 2015 @ 12:48
    Dennis Aaen
    0

    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

  • Tom 161 posts 322 karma points
    Mar 13, 2015 @ 12:55
    Tom
    0

    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?

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 13, 2015 @ 13:09
    Dennis Aaen
    1

    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

  • Sagar 74 posts 275 karma points
    May 20, 2016 @ 10:37
    Sagar
    0

    How to create Image Gallery according to Folder Suppose, I am having 2 folders F1 and F2 i want images from F1 to be displayed first and then F2 in my frontend

    Can u Help me?

  • Tom 161 posts 322 karma points
    Mar 13, 2015 @ 13:13
    Tom
    0

    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
     

  • Tom 161 posts 322 karma points
    Mar 13, 2015 @ 13:15
    Tom
    0

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

    Could I use a templatepage?

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 13, 2015 @ 13:18
    Dennis Aaen
    0

    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

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 13, 2015 @ 13:24
    Dennis Aaen
    1

    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

  • Tom 161 posts 322 karma points
    Mar 13, 2015 @ 13:50
    Tom
    0

    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

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 13, 2015 @ 14:04
    Dennis Aaen
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft