I am new to Umbraco and just downloaded the latest version. I is difficult to get up-to-speed because of the lack of documentation. I want to create a site that is split up in several diffent areas. On the top level (level 1) I only want the toplevel of these areas and the pages directly linked to the toplevel, e.g. "Contact Us".
But as soon as a we are in one of the areas (level 2) I want the menu to show all underlying pages, but only for this area.
What do I do? How to change the code of the Partial View MainNavigation (see below)
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ var home = CurrentPage.Site(); }
@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)"> @if(childPage.DocumentTypeAlias == "LandingPage") { <span>@childPage.Name</span> @childPages(childPage.Children) } else { <a href="@childPage.Url">@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> } }
If I have understand your question correctly, then I think that this peice of code should at least help you in the right direction.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ var home = CurrentPage.Site(); }
@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)">
@if(childPage.DocumentTypeAlias == "LandingPage")
{
<a href="@childPage.Url">@childPage.Name</a>
@childPages(childPage.Descendants())
} else {
<a href="@childPage.Url">@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.Descendants())
}
</li>
}
</ul>
}
}
You will need to change some CSS so the dropdown only are displaying when you have selected one of the area pages, and not just when you are hovering the menu item.
If you have further questions to this keep asking, or if I have totally misunderstood what you are trying to archive.
Okay now I am knowing what you are trying to do. With this code below, you first render the landing pages when you are on the homepage. If you are on the learn page, then the menu will display the pages: The starter kit, Basics, Masterclasses
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ var home = CurrentPage; }
@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)">
@if(childPage.DocumentTypeAlias == "LandingPage")
{
<a href="@childPage.Url">@childPage.Name</a>
} else {
<a href="@childPage.Url">@childPage.Name</a>
}
</li>
}
else
{
<li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
<a href="@childPage.Url">@childPage.Name</a>
</li>
}
}
</ul>
}
You´re welcome, happy that I could help you out. You can mark the question as solved by clicking the green tick on the left side of the screen beside the avatar for the post that gives you the right solution.
By doing this then other people who comes across this post can go directly to the solution which works for you.
When you go to a page under the Landing Page the menu goes empty, when it should keep the same menu as when on the Landing Page. So it does not work correctly.
I think that this code below should fits your need.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ var home = CurrentPage.Site(); }
@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)">
@if(childPage.DocumentTypeAlias == "LandingPage")
{
<a href="@childPage.Url">@childPage.Name</a>
}else{
<a href="@childPage.Url">@childPage.Name</a>
}
</li>
}
else
{
<li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
<a href="@childPage.Url">@childPage.Name</a>
</li>
}
}
</ul>
}
Could you please post a screenshot on how your menu should look like when you are on different pages. I am not sure what problem was with the last code there you get the child pages for the current page that you are viewing in the browser.
But you then say When you go to a page under the Landing Page the menu goes empty, did the landing page have any children and if the don´t have children what should then be showing?
Okay but what was wrong with the old code then, it renders the submenu if the page has any children. It´s that want you want or where did it go wrong then.
On the first series of screenshots the menu is gone when on the "The starter kit" page (3rd page). I was looking for the menu shown on the Landing Page "Learn". So the same menu as on the 2nd page of the screenshots in the 1st series.
Just to ensure that I am right. So when you are on the frontpage you want to see a menu of Learn, Explorer, Extend, Blog and Contact. And when you are on the learn landing page which elements should you then see in the menu, can you point this out.
Okay I think I have it now, this code below, should give you what you are after. When you are on the homepage the you will see Learn, Exploerer, Extend, Blog and Contact.
When you are on the learn item then you will see "The starter kit", "Basics" and "Masterclasses", and their children if they have some.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ var home = CurrentPage; }
@if(home.DocumentTypeAlias == "Home")
{
var naviLevel = home.Children.First().Level;
<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)">
@if(childPage.DocumentTypeAlias == "LandingPage")
{
<a href="@childPage.Url">@childPage.Name</a>
} else {
<a href="@childPage.Url">@childPage.Name</a>
}
</li>
}
else
{
<li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
<a href="@childPage.Url">@childPage.Name</a>
</li>
}
}
</ul>
}
@if (home.DocumentTypeAlias != "Home")
{
@* Get the first page in the children *@
@* Add in level for a CSS hook *@
<ul>
@* For each child page under the home node *@
@foreach (var childPage in home.Descendants())
{
if (childPage.Children.Any())
{
<li class="has-child @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
@if(childPage.DocumentTypeAlias == "LandingPage")
{
<a href="@childPage.Url">@childPage.Name</a>
} else {
<a href="@childPage.Url">@childPage.Name</a>
}
</li>
}
else
{
<li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
<a href="@childPage.Url">@childPage.Name</a>
</li>
}
}
</ul>
}
Hope this helps, perhaps this can be done in a much better way.
Fanoe starterkit navigation
I am new to Umbraco and just downloaded the latest version. I is difficult to get up-to-speed because of the lack of documentation. I want to create a site that is split up in several diffent areas. On the top level (level 1) I only want the toplevel of these areas and the pages directly linked to the toplevel, e.g. "Contact Us".
But as soon as a we are in one of the areas (level 2) I want the menu to show all underlying pages, but only for this area.
What do I do? How to change the code of the Partial View MainNavigation (see below)
Hi Nico,
If I have understand your question correctly, then I think that this peice of code should at least help you in the right direction.
You will need to change some CSS so the dropdown only are displaying when you have selected one of the area pages, and not just when you are hovering the menu item.
If you have further questions to this keep asking, or if I have totally misunderstood what you are trying to archive.
Hope this helps, /Dennis
Thanks Dennis!
A step forward and I am learning.
What I wonder now is:
Looking forward to more of your suggestions!
Hi Nico,
Okay now I am knowing what you are trying to do. With this code below, you first render the landing pages when you are on the homepage. If you are on the learn page, then the menu will display the pages: The starter kit, Basics, Masterclasses
Hope this helps,
/Dennis
Dennis,
This looks exactly like what I was looking for! Thanks a lot.
Cheers
Nico
Hi Nico,
You´re welcome, happy that I could help you out. You can mark the question as solved by clicking the green tick on the left side of the screen beside the avatar for the post that gives you the right solution.
By doing this then other people who comes across this post can go directly to the solution which works for you.
/Dennis
I cheered too early.
When you go to a page under the Landing Page the menu goes empty, when it should keep the same menu as when on the Landing Page. So it does not work correctly.
Hi Nico,
I think that this code below should fits your need.
Hope this helps,
/Dennis
Hi Dennis,
Now I lost my second level.
Nico
Hi Nico,
Could you please post a screenshot on how your menu should look like when you are on different pages. I am not sure what problem was with the last code there you get the child pages for the current page that you are viewing in the browser.
But you then say When you go to a page under the Landing Page the menu goes empty, did the landing page have any children and if the don´t have children what should then be showing?
Looking forward to hear from you.
/Dennis
Hi Dennis. This is on a fresh install.
After your Post that I thought solved my question:
Looks good so far. No submenus.
Still good and what I was looking for. But now I click "The starter kit"
And the menus are gone now.
Then after your last suggestion:
When I click the same menu show, no submenus at all anymore.
Hi Nico,
Okay but what was wrong with the old code then, it renders the submenu if the page has any children. It´s that want you want or where did it go wrong then.
Looking forward to hear from you.
/Dennis
Hi Dennis,
On the first series of screenshots the menu is gone when on the "The starter kit" page (3rd page). I was looking for the menu shown on the Landing Page "Learn". So the same menu as on the 2nd page of the screenshots in the 1st series.
Hi Nico
Just to ensure that I am right. So when you are on the frontpage you want to see a menu of Learn, Explorer, Extend, Blog and Contact. And when you are on the learn landing page which elements should you then see in the menu, can you point this out.
Sorry that I don´t get it right.
/Dennis
Hi Dennis,
Correct about the top level. So the Landing Pages and all othe pages directly under the top level, so in this case "Contact".
On other levels everything for the current Landing Page. So in this case "The starter kit", "Basics" and "Masterclasses" (and possibly the children).
Hi Nico,
Okay I think I have it now, this code below, should give you what you are after. When you are on the homepage the you will see Learn, Exploerer, Extend, Blog and Contact.
When you are on the learn item then you will see "The starter kit", "Basics" and "Masterclasses", and their children if they have some.
Hope this helps, perhaps this can be done in a much better way.
/Dennis
Same problem as before, Dennis. No menu when on a page under the Landing Page, e.g. "The Starter Kit".
Difficult question, is it?
Hi Nico,
But does this have any children at all and if it not, what should then be showing?
/Dennis
I was looking for exactly the same menu as on the landing page.
So on both the Landing Page and all its childeren:
Learn (not shown now) - The starter kit - Basics - Masterclasses
And if present their children
is working on a reply...