Copied to clipboard

Flag this post as spam?

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


  • DonZalmrol 220 posts 833 karma points
    Mar 27, 2015 @ 16:05
    DonZalmrol
    0

    Sidebar navigation

    Hi everybody, I'm creating a sidebar navigation pane for the new website of my work.

    So I have a top level navigation that has the main items in it and then I wish to create a sidebar navigation with just the sub items from that topic, it should run up and down.

    The (test) website in question is: http://euronav.don-zalmrol.be/

    And on the page you can see the content is on the "about us" page. You can see the beside the child, parent, grandparent, etc...

    So e.g. what I wish to have listed is: - About us - Our business - Tanker shipping - Spot - Test - Time charter contracts - FSO - History - Vision & mission - Strategy - Board of directors - Executive committee - Senior management

    It does it now, but it also shows the other main items of the navigation and it's children. I also wish to have the sidebar "fixed" so if you are deeper in the topic (e.g. our business -> Tanker shipping -> Spot) that you still see the tree navigation of the whole "about us" section.

    Could somebody help me out?

    Thank you!

    The code I use is noted below.

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

    @* Ensure that the Current Page has children, where the property umbracoNaviHide is not True @ @if (CurrentPage.Children.Where("Visible").Any()) { @ Get the first page in the children, where the property umbracoNaviHide is not True *@ var naviLevel = CurrentPage.Children.Where("Visible").First().Level;

    @* Add in level for a CSS hook *@
    <ul class="">
    
        @* For each child page under the root node, where the property umbracoNaviHide is not True *@
        @foreach (var childPage in CurrentPage.AncestorOrSelf(1).Children.Where("Visible"))
        {
            <li>
                @* Show root *@
                <a href="@childPage.Url">@childPage.Name</a>
    
                @* if the current page has any children, where the property umbracoNaviHide is not True *@
                @if (childPage.Children.Where("Visible").Any())
                {                    
                    @* Call our helper to display the children *@
                    @childPages(childPage.Children)
                }
            </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="level-@(naviLevel)">
            @foreach (var page in pages.Where("Visible"))
            {
                <li>
                    <a href="@page.Url">@page.Name</a>
    
                    @* if the current page has any children, where the property umbracoNaviHide is not True *@
                    @if (page.Children.Where("Visible").Any())
                    {                        
                        @* Call our helper to display the children *@
                        @childPages(page.Children)
                    }
                </li>
            }
        </ul>
    }
    

    }

  • Matt Barlow | jacker.io 164 posts 740 karma points c-trib
    Mar 27, 2015 @ 16:36
    Matt Barlow | jacker.io
    0

    So you just want to show the current section? Change the AncestorOrSelf(1) to (2) and take the root node link out of the foreach loop. 

  • Matt Barlow | jacker.io 164 posts 740 karma points c-trib
    Mar 27, 2015 @ 16:37
    Matt Barlow | jacker.io
    0

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

     

    @{

    var sectionPage = CurrentPage.AncestorOrSelf(2);

    }

     

    <ul>

     

       <li>

     

     <a href="@sectionPage.Url">@sectionPage.Name</a>

    </li>

     

     

     

        @foreach (var childPage in sectionPage.Children.Where("Visible"))

     

        {

     

     <li>

     

     <a href="@childPage.Url">@childPage.Name</a>

     

                @* if the current page has any children, where the property umbracoNaviHide is not True *@

     

                @if (childPage.Children.Where("Visible").Any())

     

                {                    

     

                    @* Call our helper to display the children *@

     

                    @childPages(childPage.Children)

     

                }

     

           </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="level-@(naviLevel)">

            @foreach (var page in pages.Where("Visible"))

            {

                <li>

                    <a href="@page.Url">@page.Name</a>

     

                    @* if the current page has any children, where the property umbracoNaviHide is not True *@

                    @if (page.Children.Where("Visible").Any())

                    {                        

                        @* Call our helper to display the children *@

                        @childPages(page.Children)

                    }

                </li>

            }

        </ul>

    }

  • DonZalmrol 220 posts 833 karma points
    Mar 29, 2015 @ 19:00
    DonZalmrol
    0

    Hi Matt,

    I've tested your code, but I get an error. Will debug it a bit more.

  • DonZalmrol 220 posts 833 karma points
    Mar 30, 2015 @ 11:47
    DonZalmrol
    0

    To make it a bit easier to understand, I wish to see the same kind of navigation as on the old website.

    Old site New site

  • Matt Barlow | jacker.io 164 posts 740 karma points c-trib
    Mar 30, 2015 @ 11:52
    Matt Barlow | jacker.io
    0

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

     

    @{

    var rootPage = CurrentPage.AncestorOrSelf(1);

    var sectionPage = CurrentPage.AncestorOrSelf(2);

    }

     

    <ul>

     

       

     

     

        @foreach (var childPage in rootPage.Children.Where("Visible"))

     

        {

     

     <li>

     

     <a href="@childPage.Url">@childPage.Name</a>

     

                @* if the current page has any children, where the property umbracoNaviHide is not True *@

     

                @if (childPage.Children.Where("Visible").Any() && childPage.Id == sectionPage.Id)

     

                {                    

     

                    @* Call our helper to display the children *@

     

                    @childPages(childPage.Children)

     

                }

     

           </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="level-@(naviLevel)">

            @foreach (var page in pages.Where("Visible"))

            {

                <li>

                    <a href="@page.Url">@page.Name</a>

     

                    @* if the current page has any children, where the property umbracoNaviHide is not True *@

                    @if (page.Children.Where("Visible").Any())

                    {                        

                        @* Call our helper to display the children *@

                        @childPages(page.Children)

                    }

                </li>

            }

        </ul>

    }

  • Matt Barlow | jacker.io 164 posts 740 karma points c-trib
    Mar 30, 2015 @ 12:00
    Matt Barlow | jacker.io
    0

    That should work.

  • DonZalmrol 220 posts 833 karma points
    Mar 30, 2015 @ 12:15
    DonZalmrol
    0

    Hi Matt,

    Thank you for your response. It's working :)

    Is it possible to not show the parents?

    So if you are in the "About us" section you will only see it's children, grandchildren, etc... like on the old website.

  • Matt Barlow | jacker.io 164 posts 740 karma points c-trib
    Mar 30, 2015 @ 12:23
    Matt Barlow | jacker.io
    0

    ah ok, yes it is.

  • DonZalmrol 220 posts 833 karma points
    Mar 30, 2015 @ 12:29
    DonZalmrol
    0

    I think we are nearly there, if I set rootpage to 2 and sectionpage to 3

    @{

    var rootPage = CurrentPage.AncestorOrSelf(2);

    var sectionPage = CurrentPage.AncestorOrSelf(3);

    }

    You can see only the child items and it's own children when you get in a deeper part of the navigation: enter image description here

  • Matt Barlow | jacker.io 164 posts 740 karma points c-trib
    Mar 30, 2015 @ 12:33
    Matt Barlow | jacker.io
    100

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

    @{

    var sectionPage = CurrentPage.AncestorOrSelf(2);

    }

    <ul>

       <li>

      <a href="@sectionPage.Url">@sectionPage.Name</a>

    </li>

        @foreach (var childPage in sectionPage.Children.Where("Visible"))

     

        {

     

     <li>

     

     <a href="@childPage.Url">@childPage.Name</a>

     

                @* if the current page has any children, where the property umbracoNaviHide is not True *@

     

                @if (childPage.Children.Where("Visible").Any())

     

                {                    

     

                    @* Call our helper to display the children *@

     

                    @childPages(childPage.Children)

     

                }

     

           </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="level-@(naviLevel)">

            @foreach (var page in pages.Where("Visible"))

            {

                <li>

                    <a href="@page.Url">@page.Name</a>

     

                    @* if the current page has any children, where the property umbracoNaviHide is not True *@

                    @if (page.Children.Where("Visible").Any())

                    {                        

                        @* Call our helper to display the children *@

                        @childPages(page.Children)

                    }

                </li>

            }

        </ul>

    }

  • DonZalmrol 220 posts 833 karma points
    Mar 30, 2015 @ 12:40
    DonZalmrol
    0

    Super! That solves it :)

    enter image description here

  • Matt Barlow | jacker.io 164 posts 740 karma points c-trib
    Mar 30, 2015 @ 12:42
    Matt Barlow | jacker.io
    1

    Awesome :)

  • DonZalmrol 220 posts 833 karma points
    Apr 03, 2015 @ 10:25
    DonZalmrol
    0

    So I'm further then before with my company's website and I would like to hide certain items from the side navigation we've created through the forum. But! The items should enter image description herestill be accessible through it's parents page content.

    So the it's now showing the dates in the side-navigation and I only wish to have parent (Press releases) listed nothing more. Then on the parent page "Press releases" you still can access the press item.

    For the other pages it's perfect as it is.

    Thanks!

  • Matt Barlow | jacker.io 164 posts 740 karma points c-trib
    Apr 07, 2015 @ 14:42
    Matt Barlow | jacker.io
    0

    You can just set umbracoNaviHide to true on the press releases you don't want to show in the left hand nav.

  • DonZalmrol 220 posts 833 karma points
    Apr 07, 2015 @ 14:58
    DonZalmrol
    0

    Is there a way of settings this permantely for the press releases?

Please Sign in or register to post replies

Write your reply to:

Draft