Don't miss out Virtual Happy Hour this Friday (April 26).
Try our conversational search powered by Generative AI!
AI OnAI Off
Custom HTML5 Menu
I've built a couple of those and I've always stayed away from dynamic properties and as much as possible from XHTML properties as well.
Instead I've a added a "Mega menu" tab to my base class for pages.
Looking at your site that tab would contain props for Heading, Intro, two Link collection props for the link columns and the texts and URLs for the buttons.
I've used fragment in the links and ID's or data-attributes to match the menu items with its hidden flyout div. Something like <a href="/page-1/#flyout-@CurrentMenuItemPage.PageLink.ID">Page 1</a>
<div id="flyout-@CurrentMenuItemPage.PageLink.ID">
Properties rendered from the menu pages that has some content in the "Mega menu" tab.
</div>
We usually render all menu item's divs in a separate action and do an AJAX call to retrieve them on demand.
This is has been stable and easy for editors to work with.
Jul 30, 2015 11:39
Hi,
I've been struggling with this for a while now and am looking for some advice from the experts.
If you go to www.budgetinsurance.com you will see that the menu has dropdown elements in it and some that don't.
The site was built, by me, in CMS 6 and I included the menu on every single page in the editor as I couldn't find another way of making this sort of menu from a menu control.
I'm now rebuilding the site in CMS 8 and wonder if there is a way of making this more simplified? I could create a dynamic property with the menu based on the root of the site but I can't seem to get handles on the PageUrl to be able to do MVC if statements to set the class="tabOn" (active), or, more preferably I'd love to use the proper way of a Menu control.
Has anyone else experienced this sort of issue before and how have you resolved it?
Many thanks in advance as it's driving me insane :)