Mega Menu

Suneel Jhangiani asked on July 18, 2015 17:46

I've used the various controls to generate a menu in the past using Hierarchical Transformations. However, I now have a requirement to generate a Mega Menu that requires all items in the second level for a particular submenu to be split into 2 unordered lists which are in separate div tags. So, I was wondering what was a recommended way to do this?

I'm basically considering checking the DocumentName at the top level transformation and if it matches the one with the megamenu drop down then I pull in an array of all the items and then loop through each halve. However, this also means I need to check these in the sub-level to ensure they aren't being added again.

I'd also like to know how you guys might arrange this so that you can have up to 12 columns as opposed to 2, since we predominantly work with Bootstrap. I know I can obviously divide by 12 and then loop through, just seems a bit messy to do this with transformations.

Recent Answers

Brenden Kehren answered on July 20, 2015 05:20

How is your hierarchy setup? You can do this if you have the hierarchy setup like so:

-root
--/page1
---/page1/subpage1
----/page1/subpage1/subsubpage1
---/page1/subpage2
----/page1/subpage2/subsubpage1

0 votesVote for this answer Mark as a Correct answer

Suneel Jhangiani answered on July 20, 2015 13:06

Yes, the page hierarchy is setup like for example the following:

-root
--/item1
--/item1/submenuitem1
--/item1/submenuitem2
--/item1/submenuitem3
--/item1/submenuitem4
--/item2
--/item3
--/item3/submenuitem1
--/item3/submenuitem2
--/item3/submenuitem2/subsubmenuitem1
--/item3/submenuitem2/subsubmenuitem2
--/item3/submenuitem2/subsubmenuitem3
--/item3/submenuitem3
--/item3/submenuitem4

The key here is that Item1's dropdown menu will be a MegaMenu which should use two div's to represent a two column layout. however, Item3's dropdown menu should just be a regular drop down with its 'submenuitem2' also being a regular dropdown.

What I'm only looking at is getting the output right in terms of basic DIV, UL and LI tags with relevant classnames to work with Bootstrap.

0 votesVote for this answer Mark as a Correct answer