Right now the following code lists all menu items, but does not allow for a drop down menu for the "About" menu item, which should then show the various sub menu items, such as: "People", "Careers", etc. These sub menu pages are not children of the "About" node. "About", "People", "Careers", etc. are all children of the "Home" node.
@inherits UmbracoTemplatePage
@{
var homePage = Umbraco.TypedContentAtRoot().FirstOrDefault();
var menuPages = homePage.Children().Where(f => f.IsVisible());
var isHomePage = homePage.Id == Model.Content.Id;
}
<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li class="@(isHomePage ? "active" : string.Empty)"><a href="@homePage.Url">@homePage.Name</a></li>
@foreach (var item in menuPages)
{
//set active class if current page is in this section
var activeClass = !isHomePage && Model.Content.Path.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries).Contains(item.Id.ToString()) ? "active" : string.Empty;
<li class="@activeClass">
<a href="@item.Url">@item.Name</a>
</li>
}
</ul>
</div>
</div>
I would like it so that the menu creates a drop-down for any further sub-menu items, as well as create an active menu item once clicked. Home and the Blog (articulate) links are the only menu items without sub menus below them. The above code from the partial view creates the active menu item for all menu items, but does not create any drop down sub menus.
Any help would be greatly appreciated. The website has grown to a substantial size and the menu is quite impossible to update statically, since 100+ pages would have to be updated every time a menu items is added.
Apologies I don't get alerts to replies, so I end up searching my name to find replies, so often I miss things, anyway, I think what you need here is inside the foreach loop, check if the current item, has any children, and if they do, loop through those to create your markup for the second sub menu... something like this:
@inherits UmbracoTemplatePage
@{
var homePage = Umbraco.TypedContentAtRoot().FirstOrDefault();
var menuPages = homePage.Children().Where(f => f.IsVisible());
var isHomePage = homePage.Id == Model.Content.Id;
}
<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li class="@(isHomePage ? "active" : string.Empty)"><a href="@homePage.Url">@homePage.Name</a></li>
@foreach (var item in menuPages)
{
//set active class if current page is in this section
var activeClass = !isHomePage && Model.Content.Path.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries).Contains(item.Id.ToString()) ? "active" : string.Empty;
// you could filter out certain children by document type alias but this would be 'any children'
var subMenuItems = item.Children().Where(f=>f.IsVisible());
if (subMenuItems.Any()){
<li class="dropdown">
<a class="dropdown-toggle @activeClass" data-toggle="dropdown" href="@pageNode.Url">@pageNode.Name</a>
<ul class="dropdown-menu">
<li><a class="" href="@pageNode.Url">@pageNode.Name</a></li>
@foreach (var subPage in subMenuItems)
{
<li><a href="@subPage.Url">@subPage.Name</a></li>
}
</ul>
</li>
}
else {
// no sub menu
<li class="@activeClass">
<a href="@item.Url">@item.Name</a>
</li>
} }
</ul>
</div>
</div>
Thanks for the reply @ Marc Goodson. I am getting a complication error with <a class="dropdown-toggle @activeClass" data-toggle="dropdown" href="@pageNode.Url">@pageNode.Name</a>
pageNode does not exist in the current context. I'm assuming it needs to be defined as a var, but not sure how to define it. Any ideas?
I am still having an issue with the items because I did not group sub menu items (for the drop down) into folders, so they are all just under the home node. So In an example like:
Home - no sub menu
About - sub menu: People, About Us, Careers
Articles - no sub menu
With the current code I am getting an output of: Home, About, People, About Us, Careers, Articles > Article/Archive/Authors (article, archive, authors are all sub menu items under Articles, which will all need to be hidden).
For SEO purposes I avoided placing sub menu items as child nodes of the other nodes, so there was no sub folder menu in the web address path.
Any ideas on how to make it appear the desired way without placing children under the various nodes?
I usually do use the structure of the tree in Umbraco to map to the structure of the site, and therefore implement the navigation as above.
In your scenario there is nothing to 'tie' the parent navigation item to the sub items.
so my suggestion would be (if you wanted to avoid placing child nodes under various nodes) would be to add a new property to your pages that is a 'Content Picker' called perhaps 'Sub Menu Items' - and here you 'pick' the pages that should appear below a particular item...
then
var subMenuItems = item.Children().Where(f=>f.IsVisible());
So if I have only one document type for the submenu pages, I would add Sub Menu Item as a Content Picker. However, how would it know when a certain submenu item is under a certain parent?
var menuPages = homePage.Children().Where(f => f.IsVisible());
The IsVisible filters out any pages that are hidden from navigation.
If you add a special property called umbracoNaviHide as a checkbox
and tick that for any page that shouldn't be in the top level nav
then they won't be written out at the top level, and will only appear when they are picked beneath another page...
(it's a bit of a faff, the better way is to structure the content tree to match the depth of the pages to build the navigation more intuitively, you can always use umbracoUrlAlias + canonical url (or a custom Url Provider) to make all the urls appear at the root, if you need)
Thanks. How will it know though that, for example, the "People" submenu page is supposed to appear under the "About" menu item?
Also, I'm hesitant to re-order the nodes as children for the following reason:
the umbracoUrlAlias will do redirection to the new alias rather than creating the path from the start as the alias (I don't know if this is the case, but I cannot mess up the SEO...maybe I'm wrong).
Also, for a certain menu item named "Practice Areas" it is styled different than the other menu item "About". How can I include these styles with the loop? I am thinking of moving the nodes around into the various folders if it is easier and so long as my SEO concern above holds no merit.
<!-- Practice Areas -->
<li class="dropdown mega-menu-fullwidth active">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Practice Areas
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-5 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li class="header__list-item"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/business-lawyer/';" onkeypress="parent.location='/business-lawyer/';" tabindex="0">Business</h3></li>
<!-- Business -->
<li><a href="/asset-share-purchase/">Asset / Share Purchase and Sale</a></li>
<li><a href="/commercial-contracts/">Commercial Contracts</a></li>
<li><a href="/corporate-governance/">Corporate Governance</a></li>
<li><a href="/employment/">Employment</a></li>
<li><a href="/incorporation/">Incorporation</a></li>
<li><a href="/joint-venture-agreements/">Joint Venture (JV) Agreements</a></li>
<li><a href="/lending-loans-financing/">Lending / Loans / Financing</a></li>
<li><a href="/licensing/">Licensing</a></li>
<li><a href="/not-for-profits/">Not-For-Profits | Charities</a></li>
<li><a href="/partnerships/">Partnerships</a></li>
<!-- End Business -->
<li class="header__list-item"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/startup-lawyer/';" onkeypress="parent.location='/startup-lawyer/';" tabindex="0">Startups</h3></li>
<!-- Startups -->
<li><a href="/business-structures/">Business Structures</a></li>
<li><a href="/debt-financing/">Debt Financing</a></li>
<li><a href="/equity-financing/">Equity Financing</a></li>
<li><a href="/founder-agreements/">Founder Agreements</a></li>
<li><a href="/ip-strategy/">IP Strategy</a></li>
<li><a href="/shareholder-agreements/">Shareholder Agreements</a></li>
<li><a href="/shareholder-disputes/">Shareholder Disputes</a></li>
<li><a href="/vesting-schedules/">Vesting Schedules</a></li>
<!-- End Startup -->
</ul>
</div>
<div class="col-md-5 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li class="header__list-item header__list-item-active"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/ip-lawyer/';" onkeypress="parent.location='/ip-lawyer/';" tabindex="0">Intellectual Property (IP)</h3></li>
<!-- IP -->
<li><a href="/assignment-agreements/">Assignment Agreements</a></li>
<li><a href="/cda/">Confidentiality Disclosure Agreements (CDA)</a></li>
<li><a href="/copyright-infringement/">Copyright Infringement</a></li>
<li><a href="/copyright-lawyer/">Copyright Registration</a></li>
<li><a href="/domain-registration/">Domain Registration</a></li>
<li><a href="/ip-enforcement/">IP Enforcement</a></li>
<li><a href="/licence-agreements/">Licence Agreements</a></li>
<li><a href="/nda/">Non-Disclosure Agreements (NDA)</a></li>
<li><a href="/register-your-trademark-canada/">Register Your Trademark (TM)</a></li>
<li><a href="/trademark-agent-mississauga/">Trademark Agent</a></li>
<li><a href="/trademark-infringement/">Trademark Infringement</a></li>
<li><a href="/trademark-lawyer/">Trademark Searching / Watching</a></li>
<li><a href="/udrp-urs/">UDRP / URS</a></li>
<!-- End IP -->
</ul>
</div>
<div class="col-md-5 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li class="header__list-item"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/litigation-lawyer/';" onkeypress="parent.location='/litigation-lawyer/';" tabindex="0">Litigation</h3></li>
<!-- Litigation -->
<li><a href="/commercial-disputes/">Commercial Disputes</a></li>
<li><a href="/debt-recovery/">Debt Recovery</a></li>
<li><a href="/defamation/">Defamation (Libel and Slander)</a></li>
<li><a href="/domain-disputes/">Domain Disputes</a></li>
<li><a href="/intellectual-property-disputes/">Intellectual Property Disputes</a></li>
<li><a href="/negligence/">Negligence</a></li>
<li><a href="/product-liability/">Product Liability</a></li>
<!-- End Litigation -->
<!-- <li><br /></li> -->
<li class="header__list-item"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/criminal-lawyer/';" onkeypress="parent.location='/criminal-lawyer/';" tabindex="0">Criminal Law</h3></li>
<!-- Criminal -->
<li><a href="/assaults/">Assaults</a></li>
<li><a href="/driving-offences/">Driving Offences</a></li>
<li><a href="/thefts/">Thefts</a></li>
<!-- End Criminal -->
</ul>
</div>
<div class="col-md-5 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li class="header__list-item"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/technology-lawyer/';" onkeypress="parent.location='/technology-lawyer/';" tabindex="0">Technology</h3></li>
<!-- Technology -->
<li><a href="/corporate-commercial/">Corporate / Commercial</a></li>
<li><a href="/development-agreements/">Development Agreements</a></li>
<li><a href="/hosting-agreements/">Hosting Agreements</a></li>
<li><a href="/iaas-agreements/">Infrastructure as a Service (IaaS) Agreements</a></li>
<li><a href="/it-contracting/">IT Contracting</a></li>
<li><a href="/master-service-agreements/">Master Service Agreements (MSA)</a></li>
<li><a href="/outsourcing-agreements/">Outsourcing Agreements</a></li>
<li><a href="/paas-agreements/">Platform as a Service (PaaS) Agreements</a></li>
<li><a href="/privacy/">Privacy</a></li>
<li><a href="/service-agreements/">Service Agreements</a></li>
<li><a href="/saas-agreements/">Software as a Service (SaaS) Agreements</a></li>
<li><a href="/software-development-agreements/">Software Development Agreements</a></li>
<li><a href="/statement-of-work/">Statement of Work (SoW)</a></li>
<li><a href="/terms-of-service/">Terms of Service / Terms of Use</a></li>
<!-- End Technology -->
</ul>
</div>
<div class="col-md-5 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li class="header__list-item"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/real-estate-lawyer/';" onkeypress="parent.location='/real-estate-lawyer/';" tabindex="0">Real Estate</h3></li>
<!-- Real Estate -->
<li><a href="/commercial-leasing/">Commercial Leasing</a></li>
<li><a href="/independent-legal-advice/">Independent Legal Advice (ILA)</a></li>
<li><a href="/landlord-tenant/">Landlord / Tenant</a></li>
<li><a href="/residential-leasing/">Residential Leasing</a></li>
<!-- End Real Estate -->
<!-- <li><br /></li> -->
<li class="header__list-item"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/wills-power-attorney/';" onkeypress="parent.location='/wills-power-attorney/';" tabindex="0">Wills and Estates</h3></li>
<!-- Wills and Estates -->
<li><a href="/change-your-will/">Codicils | Change Your Will</a></li>
<li><a href="/power-of-attorney-care/">Power of Attorney for Care</a></li>
<li><a href="/power-of-attorney-property/">Power of Attorney for Property</a></li>
<li><a href="/trusts/">Trusts</a></li>
<li><a href="/wills/">Wills</a></li>
<!-- End Wills and Estates -->
<!-- <li><br /></li> -->
<li class="header__list-item"><h3 style="color:#3498db; cursor: pointer;" onClick="parent.location='/notary/';" onkeypress="parent.location='/notary/';" tabindex="0">Notary</h3></li>
<!-- Notary -->
<li><a href="/commissioning-affidavits/">Commissioning Affidavits</a></li>
<li><a href="/commissioning-statutory-declarations/">Commissioning Statutory Declarations</a></li>
<li><a href="/legalization-authentication/">Legalization and Authentication</a></li>
<li><a href="/notarizing-documents/">Notarizing Documents</a></li>
<!-- End Notary -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Practice Areas -->
As you can see this differs from the other menu options, for example, "About":
<!-- About -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
About
</a>
<ul class="dropdown-menu" role="menu">
<!-- About Us -->
<li>
<a href="/about-us/">About Us</a>
</li>
<!-- About Us -->
<!-- People -->
<li>
<a href="/about-our-team/">People</a>
</li>
<!-- End People -->
<!-- Careers -->
<li>
<a href="/careers/">
Careers
</a>
</li>
<!-- End Careers -->
<!-- Terms of Use -->
<li><a href="/terms/">Terms of Use</a></li>
<!-- End Terms of Use -->
<!-- Privacy Policy -->
<li><a href="/privacy-policy/">Privacy Policy</a></li>
<!-- End Privacy Policy -->
</ul>
</li>
<!-- End About -->
I find this aspect of the dynamic menu to be the most complex :s
Dynamic Navigation Menu
I am trying to implement a dynamic menu using a partial view.
An html example for such code is as follows:
With the help of @Marc Goodson in another post (https://our.umbraco.com/forum/using-umbraco-and-getting-started/84953-how-to-make-a-dynamic-menu#comment-303983) I have a partially completed piece of code for the partial view.
Right now the following code lists all menu items, but does not allow for a drop down menu for the "About" menu item, which should then show the various sub menu items, such as: "People", "Careers", etc. These sub menu pages are not children of the "About" node. "About", "People", "Careers", etc. are all children of the "Home" node.
I would like it so that the menu creates a drop-down for any further sub-menu items, as well as create an active menu item once clicked. Home and the Blog (articulate) links are the only menu items without sub menus below them. The above code from the partial view creates the active menu item for all menu items, but does not create any drop down sub menus.
Any help would be greatly appreciated. The website has grown to a substantial size and the menu is quite impossible to update statically, since 100+ pages would have to be updated every time a menu items is added.
Hi Bobi
Apologies I don't get alerts to replies, so I end up searching my name to find replies, so often I miss things, anyway, I think what you need here is inside the foreach loop, check if the current item, has any children, and if they do, loop through those to create your markup for the second sub menu... something like this:
or at least that is the gist!
regards
Marc
Thanks for the reply @ Marc Goodson. I am getting a complication error with
<a class="dropdown-toggle @activeClass" data-toggle="dropdown" href="@pageNode.Url">@pageNode.Name</a>pageNode does not exist in the current context. I'm assuming it needs to be defined as a var, but not sure how to define it. Any ideas?
Hi Bobi
Apologies
make:
to be
Thank you.
I am still having an issue with the items because I did not group sub menu items (for the drop down) into folders, so they are all just under the home node. So In an example like:
With the current code I am getting an output of:
Home, About, People, About Us, Careers, Articles > Article/Archive/Authors (article, archive, authors are all sub menu items under Articles, which will all need to be hidden).For SEO purposes I avoided placing sub menu items as child nodes of the other nodes, so there was no sub folder menu in the web address path.
Any ideas on how to make it appear the desired way without placing children under the various nodes?
Hi Bobi
I usually do use the structure of the tree in Umbraco to map to the structure of the site, and therefore implement the navigation as above.
In your scenario there is nothing to 'tie' the parent navigation item to the sub items.
so my suggestion would be (if you wanted to avoid placing child nodes under various nodes) would be to add a new property to your pages that is a 'Content Picker' called perhaps 'Sub Menu Items' - and here you 'pick' the pages that should appear below a particular item...
then
becomes something like:
so any picked items would be written out as the sub menu
and you would use the umbracoNaviHide property to hide them from the top menu!
regards
Marc
Hi Marc, that's very smart.
So if I have only one document type for the submenu pages, I would add Sub Menu Item as a Content Picker. However, how would it know when a certain submenu item is under a certain parent?
Hi Bobi
In the top level navigation you have
The IsVisible filters out any pages that are hidden from navigation.
If you add a special property called umbracoNaviHide as a checkbox
and tick that for any page that shouldn't be in the top level nav
then they won't be written out at the top level, and will only appear when they are picked beneath another page...
(it's a bit of a faff, the better way is to structure the content tree to match the depth of the pages to build the navigation more intuitively, you can always use umbracoUrlAlias + canonical url (or a custom Url Provider) to make all the urls appear at the root, if you need)
regards
Marc
Hi Marc,
Thanks. How will it know though that, for example, the "People" submenu page is supposed to appear under the "About" menu item?
Also, I'm hesitant to re-order the nodes as children for the following reason: the umbracoUrlAlias will do redirection to the new alias rather than creating the path from the start as the alias (I don't know if this is the case, but I cannot mess up the SEO...maybe I'm wrong).
Also, for a certain menu item named "Practice Areas" it is styled different than the other menu item "About". How can I include these styles with the loop? I am thinking of moving the nodes around into the various folders if it is easier and so long as my SEO concern above holds no merit.
As you can see this differs from the other menu options, for example, "About":
I find this aspect of the dynamic menu to be the most complex :s
is working on a reply...