Page 1 of 1

Making a 'mega' type menu with navigator templates

Posted: Mon Jan 27, 2020 9:54 am
by johnboyuk1
Has any one done this, or can give me any pointers on how to achieve it. Basically I need to end up with code like this:

Code: Select all

<li class="mega">
<a href="x.html">Navigation link</a>
<div class="dropdown">
<ul>

<li>
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</li>

<li>
<ul>
<li>A link that shows in a second column</li>
<li>A link that shows in a second column</li>
</ul>
</li>

</ul>
</div>
</li>
So each ul nested within the list item can be styled to show in its own column within the main dropdown panel

I hope you can picture what I'm trying to describe!

The main point is how in a navigator template would I separate out pages to push them into ul column 1, column 2 etc when they are all just child pages at the same level?

Thanks!

Re: Making a 'mega' type menu with navigator templates

Posted: Mon Jan 27, 2020 3:17 pm
by DIGI3
Sometimes it's easier to get your page structure to fit the navigation. One option would be for pages you want in the second column, set them to not show in the nav, then make a section header with child internal page links pointing to the original pages.

I've also done it where I've used one of the "extra" fields to be an indicator that this is supposed to be in the second column. You can give it a class and move it with javascript, or check for it in the menu template and loop through an extra time to build the second column.

Re: Making a 'mega' type menu with navigator templates

Posted: Fri Jan 31, 2020 7:17 pm
by velden
The main point is how in a navigator template would I separate out pages
I guess this is exactly what the 'separator' content type is for.

Re: Making a 'mega' type menu with navigator templates

Posted: Mon Feb 03, 2020 8:58 am
by johnboyuk1
thanks both, will investigate further...!