BUMP

Hi,

I'm facing the same issue. Did you manage to fix this?

Hi Ben and Bendik,

I think if you extend your umbTopNavigation with this you will get the subpages for each page.

Then you just need to make some CSS to hide and show it.

@inherits UmbracoTemplatePage
@{
    // Model.Content is the current page that we're on
    // AncestorsOrSelf is all of the ancestors this page has in the tree
    // (1) means: go up to level 1 and stop looking for more ancestors when you get there
    // First() gets the first ancestor found (the home page, on level 1)
    var homePage = CurrentPage.AncestorsOrSelf(1).First();

    // The menu items we want are all of the children of the homepage
    // We also check if "Hide in navigation" is on in the menu, we shouldn't show hidden items
    var menuItems = homePage.Children.Where("UmbracoNaviHide == false");
}
<!-- Nav -->
<nav id="nav" class="skel-panels-fixed">
    <ul>
        @* If the Url of the current page is "/" then we want to add the class "current_page_item" *@
        @* Otherwise, we set the class to null, that way it will not even be added to the <li> element *@
        <li class="@(CurrentPage.Url == "/" ? "current_page_item" : null)"><a href="/">Home</a></li>

            @foreach (var item in menuItems)
        {
            @* If the Id of the item is the same as the Id of the current page then we want to add the class "current_page_item" *@
            @* Otherwise, we set the class to null, that way it will not even be added to the <li> element *@
            <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">
                <a href="@item.Url">@item.Name</a>
                  @if (item.Children.Where("Visible").Any()){                    
                    @* Call our helper to display the children *@
                      <ul>
                      @foreach(var childItem in item.Children.Where("Visible")){ 
                          <a href="@childItem.Url">
                          <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">@childItem.Name</li>
                        </a>
                      }
                      </ul>
                  }
            </li>
                
                
        }
    </ul>
</nav>
<!-- /Nav -->

Hope this helps,

/Dennis

Thanks Dennis!

I actually came up with the same solution myself just a while ago, only I included support for the "Hide in navigation" flag also for child pages. Here's my code:

@inherits UmbracoTemplatePage
@{
    var homePage = CurrentPage.AncestorOrSelf(1);

    // The menu items we want are all visible children of the homepage
    var menuItems = homePage.Children.Where("UmbracoNaviHide == false");
}
<!-- Nav -->
<nav id="nav" class="skel-panels-fixed">
    <ul>
        @* Add the home page to the menu, highlight if it's the current page *@
        <li class="@(CurrentPage.Id == homePage.Id ? "current_page_item" : null)"><a href="/">@homePage.Name</a></li>

        @* Add the child pages of the home page to the menu, highlight the one that is the current page *@
        @foreach (var item in menuItems)
        {
            <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">
                <a href="@item.Url">@item.Name</a>
                @{

                    // Child pages that should be visible in menu
                    var subMenuItems = item.Children.Where("Visible").Where("UmbracoNaviHide == false");
                    if (subMenuItems.Any())
                    {
                        // Show child pages as a dropdown (popup menu)
                        <ul>
                            @foreach (var subItem in subMenuItems)
                            {
                                <li><a href="@subItem.Url">@subItem.Name</a></li>
                            }
                        </ul>
                    }
                }
            </li>
        }
    </ul>
</nav>
<!-- /Nav -->

The CSS styling

What I wanted - and probably expected - from the start, was that the menus of the Umbraco TXT starter kit would look like and function like the menus in HTML5UP's original theme. Hence, after solving the codebehind challenge, I set out to clone his CSS for the dropdown menus. And it turned out to be quite simple, because he has used a jQuery component called droprotron. So basically, I downloaded the original TXT Theme here, and copied over the javascript and css needed for dropotron from it. Here's what you need to do:

1. Copy jquery.dropotron.min.js to the js folder in your Umbraco site

2. Also create a new file called init.js in the js folder, and paste in the following code:

$(function() {

// Dropotron submenus
    $('#nav > ul').dropotron({
        mode: 'fade',
        noOpenerFade: true,
        speed: 300,
        alignment: 'center'
    });
});

<script src="/js/jquery.dropotron.min.js"></script>
<script src="/js/init.js"></script>

4. Add something like the following CSS to your style-desktop.css (change colors etc. to your liking):

.dropotron {
    background: #b4a792;
    color: #fff;
    border-radius: 6px;
    line-height: 2.75em;
    text-align: center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1em 0;
    text-align: left;
    min-width: 14em;
    margin-top: -1em;
    box-shadow: 0 1em 2em 0 rgba(0,0,0,0.1);
}

    .dropotron li {
    }

        .dropotron li > a,
        .dropotron li > span {
            display: block;
            color: #f1f0ee;
            text-decoration: none;
            padding: 0 1.25em;
        }

        .dropotron li:hover > a,
        .dropotron li:hover > span,
        .dropotron li.active > a,
        .dropotron li.active > span {
            color: #fff;
            background: #c9c0b2;
        }

        .dropotron li:first-child {
            border-top: 0;
        }

        .dropotron.level-0 {
            margin-top: 1em;
            font-size: 0.9em;
        }

            .dropotron.level-0:before {
                content: '';
                position: absolute;
                left: 50%;
                margin-left: -1em;
                top: -0.65em;
                border-bottom: solid 1em #b4a792;
                border-left: solid 1em transparent;
                border-right: solid 1em transparent;
            }   

That's about it, I hope I didn't forget anything. Feel free to comment and elaborate...

Best,

Bendik

is working on a reply...