I have seen there are differnt examples on multilevel menus, but I can not solve my problem here. I have built it with a bootstrap menu.
- The menu-items that contains items is showed twice. Why?
"Gallery" is clickable and go to a new page. The "Gallery" that contains items opens the dropdown as it should.
I want to remove the first "Gallery"...
I added my code below, maybe someone knows what I am doing wrong :)?
@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"); var root = CurrentPage.AncestorOrSelf(1);
multilevel menu
Hi!
I have seen there are differnt examples on multilevel menus, but I can not solve my problem here. I have built it with a bootstrap menu. - The menu-items that contains items is showed twice. Why? "Gallery" is clickable and go to a new page. The "Gallery" that contains items opens the dropdown as it should. I want to remove the first "Gallery"...
I added my code below, maybe someone knows what I am doing wrong :)?
Beginner
My code goes like this
@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");
var root = CurrentPage.AncestorOrSelf(1);
}
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="~/Graphics/Logo.jpg" alt="" class="hidden-xs" />
<img src="~/Graphics/Logo-small.jpg" alt="" class="visible-xs" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="/">Home</a>
</li>
@foreach (var item in menuItems)
{
<li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">
<a href="@item.Url">@item.Name</a>
</li>
var subMenuItems = item.Children.Where("Visible");
if (subMenuItems.Count() > 0)
{
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">@item.Name <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
@foreach (var sub in subMenuItems)
{
<li><a class="parent" href="@sub.Url">@sub.Name</a></li>
}
</ul>
</li>
}
}
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="green-border"></div>
Change your foreach to the following:
@foreach (var item in menuItems)
{
var subMenuItems = item.Children.Where("Visible");
if (subMenuItems.Count() > 0)
{
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">@item.Name <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
@foreach (var sub in subMenuItems)
{
<li><a class="parent" href="@sub.Url">@sub.Name</a></li>
}
</ul>
</li>
}else{
<li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">
<a href="@item.Url">@item.Name</a>
</li>
}
}
There are probably cleaner ways to do this but that should be a quick fix.
Thanks a lot, it works!
is working on a reply...