Configurable menu and content system

Uses jquery.list.js plugin

HTML

<script>(function ($, document, window, undefined) {
    "use strict";

    var level = 0,
        defaults = {
        },
        methods = {
            init: function (options) {

                if (!this.size()) {
                    $.error("Selection is empty; unable to construct a jqList");
                } else {
                    settings = $.extend(defaults, { definition: List }, options);
                    if (!$.isArray(settings.definition)) {
                        $.error("No list definition data (no List var and no 'definition' option); unable to construct a jqList");
                    } else {
                        //construct list
                        this.append(listBranches(settings.definition));
                        //add custom event handler for users to react to
                        this.on("click.jqList", "li", function () {
                            $(this).trigger({
                                type: "selected",
                                siblings: $(this).closest("ul").find(" > div > li").not(this),
                                parent: $(this).parent().closest("li"),
                                children: $(this).find(" > ul > div > li")
                            });
                        });
                        return $("li", this);
                    }
                }
            },
            collapse: function () {
                $("li ul", this).hide(); //hide all sub-list containers
            },
            destroy: function () {
                this.empty();
                this.off(".jqList"); //remove all event handlers
            }
        },
        settings = {};

    //iterate list trunks/branches
    function listBranches(trunk) {
        var $trunk = $("<ul>", { "data-level": ++level });
        
         $.each(trunk, function(i, branch)  {
            var $wrapper = $("<div>", { "data-level": level });
            var $branch = $("<li>", $.extend(branch.props, {...

CSS

/* START GENERAL */
.page-container {   
        position:relative;
        margin-top:20px;
        margin-left:20px;
}
/* BOTONES GENERAL */
.menu {
    position:absolute;
    top:250px;
    left:0px;
}
.menu div {
    display:inline;
    position:relative;
    /*z-index:2;*/
}
.menu ul {
    /*position:absolute;*/
    text-align:left;
    font:17px arial,sans-serif;    
    padding:5px 0;
    width:300px;
}
.menu li {
    /*position:absolute;*/
    display: inline;
    cursor:pointer;        
    text-align:center;
    letter-spacing:1px;        
    padding:5px;        
    margin-right:-5px;
}
/* BOTONES RUBRO */
.menu ul[data-level="1"]{    
    position:absolute;
    left:0px;
    top:0px;   
    background-color: #666;
}
.menu li[data-level="1"]{    
    /*position:absolute;*/
    height:11px;    
    padding:0 5px;    
    border-right:1px solid  #000;                       
    color:#CCC;
}
.menu li[data-level="1"].active-color {
    background-color:#FC0; 
    color:#000;
    padding:6px 5px;        
    border-left:1px solid  #000; 
    border-right:1px solid  #000;         
}
.menu li[data-level="1"]:hover{    
    color: #FFF;           
}
/* BOTONES CATEGORIA */
.menu ul[data-level="2"]{    
    display:none;
    position:absolute;
    top:-38px;
    left:0px;
    background-color:#FFF;
    border:1px solid  #000;
    z-index:2;
}
.menu li.active-color ul {
    display:inline;
}
.menu li[data-level="2"]{    
    color: #4D4D4D;            
}
.menu li[data-level="2"]:hover{    
    font-weight:bold;          
}
.menu li[data-level="2"].active-color {        
    color:#000;
    padding:6px 5px;
    font-weight:bold;     
}

/* CONTENTES */
        
.cont {
    position:absolute;
    top:0px;
    left:0px;
}
.cont article, 
.cont section {
    position:absolute;
}
.cont article  {
    top:0px;
    left:0px;
    width:450px;
    height:220px;    
    background-color:#F00;
}
/* END RUBRO */

.cont section  {
    top:20px;
    left:10px;
   ...

JavaScript

//jquery.list.js plugin added via Managed Resources
//JSON menu definition is in Managed Resources

$(document).ready(function () {
    var $cont = $('.cont article, .cont section').hide();
    var $botones = $(".menu").jqList().on("selected", function (event) {
        var $siblings = event.siblings.removeClass('active-color');
        $(this).addClass('active-color');
        $cont.havingData('id', $siblings).hide().end().havingData('id', $(this)).show();
    });
    $botones.havingData('id', /(r1-c0|-c1-)/).addClass('active-color'); //show first buttons
    $cont.havingData('id', /(r1-c0|-c1-)/).show(); //prepare default content
});