Description

A simple, small and hopefully fast jquery plugin to turn an html list into columns. Originally created to work columns into multi level menus. The plugins adds <ul>'s and <li>'s to breakdown the list into columns, as well as a limited number of classes. (It does not add any css rules, you must supply your own css.)

Usage and Options

Vanilla $('ul.my-list').lst2cols();

With options $('ul.my-list').lst2cols({colNum:3, method:'lr'});

The plugin options are:

Example

Html

<ul id="target-1">
  <li>...</li>
  ... 
  <li>...</li>
  <li>
    <ul id="target-2">
      <li>...</li>
      ... 
      <li>...</li>
    </ul>
  </li>
  <li>...</li>
  ... 
  <li>...</li>
</ul>

Javascript

$('#target-1').lst2cols([{options}]); $("#target-2").lst2cols([{options}]);

Css


            /* Remove list formating */
            ul, li { margin: 0; padding: 0; }
            li { list-style: none; text-indent: 0; }
            /* columns */
            .col { float: left; margin-left: 20px; }
            .col:first-child { margin-left: 0; }
            /* Columns container (clearfix from TWBS) */
            .col-block::before, .col-block::after { content: ""; display: table; line-height: 0; }
            .col-block::after { clear: both; }

Example: List rendered top to bottom

Example: List rendered left to right

Using css flexible box layout

Example: List single column item

Just fo fun

License

The MIT License (MIT)

Copyright (c) 2015 Xavier Castagné

For Brodie