Configurable menu and content system

Uses jquery.list.js plugin

HTML

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<div class="page-container">

    <!-- CONTENEDORES -->
    <div class="cont">
        <article data-id="r1-c0-sC0">
            one
            <section data-id="r1-c1-sC0">   
                one:A
                
                           <article data-id="r1-c1-sC1">   
                one:A1
            </article>
            <article data-id="r1-c1-sC2">
                one:A2
            </article>
            <article data-id="r1-c1-sC3">
                one:A3
            </article>
                
                
            </section>
            <section data-id="r1-c2-sC0">
                one:B
            </section>
            <section data-id="r1-c3-sC0">
                one:C
            </section>
        </article>
        <article data-id="r2-c0-sC0">
            two
            <section data-id="r2-c1-sC0">   
                two:A
            </section>
            <section data-id="r2-c2-sC0">
                two:B
            </section>
            <section data-id="r2-c3-sC0">
                two:C
            </section>
        </article>
    </div>
        
    <!-- BOTONES -->
    <nav class="menu">
    </nav>

</div>

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;  
    /*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;
    width:400px;
    height:200px;...

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
});



(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);
                    }
            ...