I am trying to achieve multilingual menu. I could manage to change between languages but I could not make it to show only "Homepage" and rest of the menu.
It shows now Homepage / Startseite / rest of the menu. What I am trying to achieve is to in English "Homepage" / rest of the menu or in German "Startseite" / rest of the menu.
What I have done so far is in the following.
@{
var root = Model.Content.AncestorOrSelf(1);
var rootChildern = root.Children.Where(x => x.IsVisible());
}
<ul class="sf-menu">
@foreach (var page in rootChildern)
{
var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty;
<li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
}
</ul>
And if you want the frontpage to be heighlighed in the navigation when you are displaying the frontpage, then you code should be like this.
@{ var root = Model.Content.AncestorOrSelf(1); var rootChildern = root.Children.Where(x => x.IsVisible()); var homeNode = CurrentPage.AncestorOrSelf("Home"); var homeActive = ""; }
Ok, then you should probably just do something like this
@{
var root = Model.Content.AncestorOrSelf(1);
var rootChildern = root.Children.Where(x => x.IsVisible());
}
<ul class="sf-menu">
<li>
<a href="@root.Url">@root.Name</a>
</li>
@foreach (var page in rootChildern)
{
var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty;
<li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
}
</ul>
I just made a quick test and it should work.
You can also consider another approach where you create a navigation picker based on the "multiple node picker" property editor, which you can place on a "navigation" tab on the home node.
This way it's easy to manage the nodes that should be rendered in the navigation and it makes it possible to select the "home" node as well so all items can just be rendered within the foreach.
Multilingual Menu
Hi all,
I am trying to achieve multilingual menu. I could manage to change between languages but I could not make it to show only "Homepage" and rest of the menu.
It shows now Homepage / Startseite / rest of the menu. What I am trying to achieve is to in English "Homepage" / rest of the menu or in German "Startseite" / rest of the menu.
What I have done so far is in the following.
Hi DS
I just want to be certain that I understand what it is you're trying to achieve...
Do you want to have two different menus rendered? So on the english site it's
"Homepage" - English page - English page - Etc.
And the german site
"Startseite" - German page - German page - etc.
Or do you want to render a mixed menu with both english and german pages? It's a bit unclear to me, sorry.
/Jan
Hi Jan,
I want to have two different menu rendered as you indicated
Hi ds,
I try to do it like this this should include the homepage in your menu.
@{
var root = Model.Content.AncestorOrSelf(1);
var rootChildern = root.Children.Where(x => x.IsVisible());
var homeNode = CurrentPage.AncestorOrSelf("Home");
}
<ul class="sf-menu">
<li>
<a href="@homeNode.Url">@homeNode.Name</a>
</li>
@foreach (var page in rootChildern)
{
var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty;
<li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
}
</ul>
Remember to change this so it match your document type alias of your home page.
var homeNode = CurrentPage.AncestorOrSelf("Home");Hope this helps,
/Dennis
Thank you Dennis,
I will try your suggestion.
And if you want the frontpage to be heighlighed in the navigation when you are displaying the frontpage, then you code should be like this.
@{
var root = Model.Content.AncestorOrSelf(1);
var rootChildern = root.Children.Where(x => x.IsVisible());
var homeNode = CurrentPage.AncestorOrSelf("Home");
var homeActive = "";
}
<ul class="sf-menu">
@if(homeNode.Id == CurrentPage.Id){
homeActive = "selected";
}
<li class="@homeActive">
<a href="@homeNode.Url">
@homeNode.Name
</a>
</li>
@foreach (var page in rootChildern)
{
var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty;
<li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
}
</ul>
Hope this helps,
/Dennis
Hi DS
Ok, then you should probably just do something like this
I just made a quick test and it should work.
You can also consider another approach where you create a navigation picker based on the "multiple node picker" property editor, which you can place on a "navigation" tab on the home node.
This way it's easy to manage the nodes that should be rendered in the navigation and it makes it possible to select the "home" node as well so all items can just be rendered within the foreach.
Hope this helps.
/Jan
Oh...too slow it seems :)
/Jan
Hi ds,
Just optimized my code, so you can avoid so many variables.
@{
var root = Model.Content.AncestorOrSelf(1);
var rootChildern = root.Children.Where(x => x.IsVisible());
var homeActive = "";
}
<ul class="sf-menu">
@if(root.Id == CurrentPage.Id){
homeActive = "selected";
}
<li class="@homeActive">
<a href="@root.Url">
@root.Name
</a>
</li>
@foreach (var page in rootChildern)
{
var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty;
<li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
}
</ul>
Hope this helps,
/Dennis
Hi Jan and Dennis,
I tried both you suggested. It works in both ways. I appreciate for the quick answer :)
Oh, I forgot to ask. Is there any easy way to place language selector so user can change language from either dropdown or from the way you suggested?
Hi ds,
Try to see this blogpost, I think it can help you build a simple contextual language switcher.
http://24days.in/umbraco/2014/razor-language-switcher/
Hope this helps,
/Dennis
Thanks again for the tip Dennis :)
is working on a reply...