HTML CSS Hamburger Dynamic Columns

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.