HTML CSS Hamburger Dynamic Columns - html

Question

I have written a Knockout binding for a MegaMenu which has a hamburger component
The hamburger contains a bunch of Categories and items within these Categories
The Categories act as a header and are bolded. They then display their items underneath indented slightly
Categories and Items are just strings retrieved from a database
The rules of the hamburger are as follows:-
Don't split a Category across columns
Use 3 columns first before scrolling. i.e Don't fill only two columns and have a scroll bar (vertical)
Even up the columns as much as possible
3 columns max
The hamburger has a max height restriction
Categories are to be ordered alphabetically -
An example of the ordering is a follows:-
Assume I have the following Categories (ignore the items within them as it is the categories that are ordered)
Dogs, Cars, Cats, Beds, Furniture, Hobbies, Homes, Gyms, Horses
and if these were split across 3 columns they would be rendered as follows
Col 1 Col 2 Col 3
----- ----- -----
Beds Dogs Hobbies
Cars Furniture Homes
Cats Gyms Horses
I am able to construct html lists as follows:-
<div>
<ul>
<li>Beds
<ul>
<li>Item 1</li>
<li>Item 2
</ul>
</li>
<li>Cars
<ul>
<li>Item 1</li>
</ul>
</li>
<li>Cats
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Dogs
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
Can I use pure css to adjust it in the hamburger columns according to my rules?
That way I can avoid the messy looping etc that I am currently doing in my html

Answer 1

Your best bet is to use column layout with break-inside: avoid
From: https://css-tricks.com/almanac/properties/b/break-inside/
Fortunately, you can tell the browser to keep specific elements
together with break-inside.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
I've made an example here
http://codepen.io/HerrSerker/pen/obgddJ
.outer {
-moz-columns: 3;
-webkit-columns: 3;
columns: 3;
display: block;
}
.outer > li {
display: block;
padding-top: 30px;
-webkit-column-break-inside: avoid;
/* Chrome, Safari, Opera */
page-break-inside: avoid;
/* Firefox */
break-inside: avoid;
/* IE 10+ */
}
.outer > li > span {
text-decoration: underline;
}
.inner {
width: 200px;
display: block;
text-decoration: none;
}
.inner > li {
display: block;
padding-left: 10px;
padding-top: 3px;
}
.wrapper {
width: 600px;
margin: 0 auto;
max-height: 400px;
overflow-y: auto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<div class="wrapper"><ul class="outer">
<li><span>Lorem ipsum dolor.</span>
<ul class="inner">
<li>Fuga, ratione blanditiis commodi.</li>
<li>Obcaecati dicta ut, pariatur!</li>
<li>Earum, illum sapiente enim.</li>
</ul>
</li>
<li><span>Vel, ratione cum!</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>Accusamus, odio ipsum nemo!</li>
<li>Molestiae unde natus odio.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Corporis, tempora nisi minus.</li>
</ul>
</li>
<li><span>Aliquid, tenetur, similique.</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>Repellendus repellat placeat odit!</li>
</ul>
</li>
<li><span>Quibusdam, necessitatibus aliquid.</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>At nisi, quas veritatis!</li>
<li>Perferendis laudantium nesciunt dolor!</li>
<li>Distinctio quidem veniam impedit!</li>
</ul>
</li>
<li><span>Sed, quam, beatae.</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>Voluptates temporibus provident dolores.</li>
<li>Explicabo non minus ullam!</li>
<li>Tenetur, molestias, debitis. Voluptatum.</li>
<li>Quibusdam incidunt unde, laboriosam!</li>
<li>Fugiat perferendis eligendi, dignissimos.</li>
</ul>
</li>
<li><span>Lorem ipsum.</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>Perspiciatis, a dolore officia!</li>
</ul>
</li>
<li><span>Voluptatum, ipsum?</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>Odit, aliquam voluptates alias!</li>
</ul>
</li>
<li><span>Dolorem, quos!</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>Quae quos quas, fugit?</li>
</ul>
</li>
<li><span>Cum, excepturi.</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>Libero distinctio, necessitatibus laborum!</li>
</ul>
</li>
<li><span>Blanditiis, harum.</span>
<ul class="inner">
<li>Lorem ipsum dolor sit.</li>
<li>Corporis fuga accusamus, ab?</li>
</ul>
</li>
</ul>
</div>
Is this compatible? See here: http://caniuse.com/#feat=css-grid
As for the sorting: you cannot do this with CSS You have to do it in HTML or with JS

Answer 2

Can I use pure css to adjust it in the hamburger columns according to my rules?
No, CSS cannot perform the required even-distribution arithmetics. You're stuck with pre-formatting in HTML in this case.

Answer 3

You can set the value display:table to your parent div , and then set display:table-cell to your children items.That's not going to break your columns.

Answer 4

I think I can achieve what you want using css column:
ul{
...
column-gap: 2em;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
Demo: http://jsfiddle.net/pg2xy9h2/3/
I don't understand how it is possible to have Even up the columns as much as possible and a dynamic number of columns. Even up is a division calculation, how can you perform a division if the divisor is unknown?