Copied to clipboard

Flag this post as spam?

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


  • Johan 95 posts 264 karma points
    Nov 26, 2015 @ 13:58
    Johan
    0

    Making a side navigation

    I would like a side navigation that lists the submenus of a menu (just like a dropdown navigation would)

    Here is an example:

    enter image description here

    How would the partial macro look like?

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Nov 27, 2015 @ 08:58
    Dennis Aaen
    0

    Hi Johan,

    For making a sub navigation like this you could use the pre-code snippet called List Subpages From CurrentPage, and then you will need to make some changes to get exactly what you have pictured.

    I have make a piece of code that should do it for you, or at least a good starting point.

    @{ var selection = CurrentPage.Children.Where("Visible"); }
    
    @if (selection.Any())
    {
        <ul>
            @if (selection.Any()){ 
                <li>@CurrentPage.Name</li>
            }else{
                <li>@CurrentPage.Parent.Name</li>
            }
            @foreach (var item in selection)
            {
                <li>
                    <a href="@item.Url">@item.Name</a>
                </li>
            }
        </ul>
    }
    

    Hope this helps,

    /Dennis

  • Johan 95 posts 264 karma points
    Nov 27, 2015 @ 09:12
    Johan
    0

    Hi Dan, Thank you. However, I want to make that sub navigation act as siblings. How can I achieve that?

  • Steve Morgan 1345 posts 4452 karma points c-trib
    Nov 27, 2015 @ 14:48
    Steve Morgan
    0

    The code Dennis has supplied will do that for direct children of the currentpage - this is the same code that will output the children depending on what page you're on.

    See the selection line (line 1)

    @{ var selection = CurrentPage.Children.Where("Visible"); }
    

    If you mean you want it to list all children regardless of level below, i.e. all Descendants, not just those directly below then it's easy to change that line to:

    @{ var selection = CurrentPage.Descendants().Where("Visible"); }
    

    However this will list them all at the same level. I've even given you this hint in your main nav question. https://our.umbraco.org/forum/developers/razor/73017-sub-menu-drop-down-under-entire-menu#comment-234638

    I really think you need to take some time out trying to make this site and follow some of the tutorials and learn Razor and the basics of looping through Umbraco content.

    Follow this tutorial and the videos here in a separate project and you should find everything else much easier in the future: https://our.umbraco.org/documentation/tutorials/creating-basic-site/

    http://umbraco.tv/videos/implementor/working-with-umbraco-data/razor-syntax/introduction-to-razor/

  • Steve 140 posts 321 karma points
    Nov 28, 2015 @ 02:57
    Steve
    0

    Johan,
    Have you checked out NavIt MVC? It's an easy to customize MVC Partial View which might do what you're looking for. We've used it with very good results.
    https://our.umbraco.org/projects/starter-kits/navit-mvc/
    Cheers
    Steve

Please Sign in or register to post replies

Write your reply to:

Draft