I have this dilemma, I have to make a menu, the basic estructure is four to six main menu items and each one can have N level 2 menus and each sub menu can also have subs.
I get from the server this html two ul like this one:
<ul> <li> <a>Normal link</a></li> <li> <a> </a> <ul> this is other level of menus</ul> </li> </ul>
The first list I get just contains the main menu items, the second one all the sub levels.
It has to be presented something like this:
Each time the user click the main menu items, the sub level lists appear, when a sub level menu is clicked the next level appears below the active one.
<li> where i move all containing the next levels
<ul> and show/hide them using related classes and attributes, something like:
<ul> <li></li> <li class="i-am-for-X></li> <li></li> <li class="here-are-my-next-level-items"> <ul></ul> <ul class="i-am-x"></ul> <ul></ul> </li> <li></li> <li class="here-are-my-other-next-level-items"> </ul>
My problem comes now, I was required that the menu class should had a method that changes the number of cols per sub menus (to be used in some viewport breakpoints). This means theoretically my
i-am-x can be after the 3rd
<li> as in my above example as it could be after the 4th or the Xth so I need the same content in multiple places, as far as I can see I have only two options: Clone them or move them.
If I clone them, I will do this after my
If I move them, I have to make this after the page is loaded on each breakpoint. I think this could be more disturbing for the user and the responsiveness.
I am not sure If I am not seeing another option and/or more problems related to this options and I am not sure which one has better performance.
Thanks in advance for your input!