I'm working on a responsive website with an navigation overlay (nodes and subnodes). The navigation should be split to 4 columns for desktop view or 2 columns for tablet view. It's a nested list navigation, so a column is build with \[code\]<ul />\[/code\] around it. My idea was, simply write the navigation in 1 column and arrange it to 4 or 2 cols dynamic with jquery. html:\[code\]<!-- overlay --><nav class="overlay"> <!-- ul for column --> <ul> <!-- nodes & subnodes --> <li><a href="http://stackoverflow.com/questions/14058474/#">node</a> <ul> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14058474/#">node</a> <ul> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> <li><a href="http://stackoverflow.com/questions/14058474/#">subnode</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14058474/#">node</a> ... </ul></nav>\[/code\]I wrote this function:\[code\] $.fn.arrangeObjects = function(wrapWith, maxCols) { this.each(function() { if ($(this).parent(wrapWith).length) $(this).unwrap(); }); this.parent().each(function() { var $el = $(this).children(); amount = $el.length, wrapAmount = amount / maxCols; for (var i = 0; i < amount; i += wrapAmount) { $el.slice(i, i + wrapAmount).wrapAll('<'+ wrapWith +'/>'); } }); };\[/code\]Fired for desktops:\[code\]$(".overlay > ul > li").arrangeObjects('ul', 4);\[/code\]Fired for tablets:\[code\]$(".overlay > ul > li").arrangeObjects('ul', 2);\[/code\]This solution splits the nodes in equal parts into the cols. Unfortunately it looks not really nice this way:
What i want to achieve is an arranging with almost the same column heights, like this:
I have to respect the number of subnodes in a way, but I don't really know how to achieve that. Maybe anyone has the great tip, a little help would be appreciated.
What i want to achieve is an arranging with almost the same column heights, like this:
I have to respect the number of subnodes in a way, but I don't really know how to achieve that. Maybe anyone has the great tip, a little help would be appreciated.