jQuery: miller-columns

based upon: https://bitbucket.org/djarvis/miller-columns more at: https://github.com/ggergo/jquery-miller-columns/blob/master/jquery.ggergoMillerColumns.js https://github.com/cthayes/jquery.drillmenu https://github.com/Cinamonas/jquery-drilldown https://github.com/mageekguy/jquery.miller.js https://github.com/rpetz/DrilldownJS

by Yannick Albert

HTML

<div class="breadcrumb"></div>

<div class="columns" tabindex="1">
<ul>
    <li><a href="#">First 1</a></li>
    <li><a href="#">First 2</a></li>
    <li><a href="#">First 3</a></li>
    <li><a href="#">First 4</a>
        <ul>
            <li><a href="#">Second 1</a>
                <ul>
                    <li><a href="#">Third 1</a>
                        <ul>
                            <li><a href="#">Fourth 1</a></li>
                            <li><a href="#">Fourth 2</a></li>
                            <li><a href="#">Fourth 3</a></li>
                            <li><a href="#">Fourth 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Third 2</a></li>
                    <li><a href="#">Third 3</a></li>
                    <li><a href="#">Third 4</a>
                        <ul>
                            <li><a href="#">Fourth 1</a></li>
                            <li><a href="#">Fourth 2</a></li>
                            <li><a href="#">Fourth 3</a></li>
                            <li><a href="#">Fourth 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Second 2</a></li>
            <li><a href="#">Second 3</a></li>
            <li><a href="#">Second 4</a></li>
        </ul>
    </li>
</ul>
</div>

CSS

/**
 *
 * Cascading columns styling.
 *
 */
.columns {
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
    white-space: nowrap;
}

/* Display the lists as columns in blocks. */
ul.column {
  display: inline-block;

  vertical-align: top;
  overflow: hidden;
  margin: 0;
  padding: 0;

  border-right: 1px solid #eee;
  white-space: normal;
  visibility: visible;
  transition: 400ms;
}

/* Setting a list container class to "collapsed" will hide the column. */
ul.column.collapse {
  opacity: 0;
  visibility: hidden;
}

/* Put some space between the column's list entries. */
ul.column > li {
  list-style: none;
  padding: 0.5em;
    min-width: 10em;
}

ul.column > li.parent:after {
  content: "›";
  font-weight: bold;
}

/* Highlight while hovering, without allowing selected items to override. */
ul.column > li:hover {
  color: black;
  background-color: #eee;
}

/* Ensure all selected nodes in the hierarchy are easily seen. */
.column > .selected,
.column > .selected:hover {
  background-color: #08C;
  color: white;
}

/**
 *
 * Breadcrumb styling.
 *
 */
.breadcrumb {
  border-bottom: 1px solid #eee;
}

.breadcrumb > *:after {
  content: " › ";
}

.breadcrumb > *:last-child:after {
  content: "";
}

JavaScript

/**
 * MIT License
 *
 * Copyright 2014 White Magic Software, Inc.
 */
    "use strict";

/*jslint browser: true, devel: true, white: true, unparam: true */
/*global $, jQuery*/

(function ($, window, document, undefined) {
    var settings;
    var columnSelector = 'ul';
    var itemSelector = 'li';

    /** Returns a list of the currently selected items. */
    function chain() {
        return $(".column > .selected");
    }

    /** Add the breadcrumb path using the chain of selected items. */
    function breadcrumb() {
        var $breadcrumb = $("div.breadcrumb").empty();

        chain().each(function () {
            var $crumb = $(this);
            $('<span>')
                .text($crumb.text().trim())
                .click(function () {
                $crumb.click();
            }).appendTo($breadcrumb);
        });
    }

    /** Ensure the viewport shows the entire newly expanded item. */
    function animation($columns, $column) {
        var width = 0;
        chain().not($column).each(function () {
            width += $(this).outerWidth(true);
        });
        $columns.stop().animate({
            scrollLeft: width
        }, settings.delay);
    }

    /** Convert nested lists into columns using breadth-first traversal. */
    function unnest($columns) {
        var queue = [];
        var $node;

        // Push the root unordered list item into the queue.
        queue.push($columns.children());

        while (queue.length) {
            $node = queue.shift();

            $node.children(itemSelector).each(function (item, el) {
                var $this = $(this);
                var $child = $this.children(columnSelector),
                    $ancestor = $this.parent().parent();

                // Retain item hierarchy (because it is lost after flattening).
                if ($ancestor.length && ($this.data("ancestor") == null)) {
                    // Use addBack to reset all selection chains.
                   ...