Configurable menu and content system

by alano

HTML

<div class="page-container">

    <!-- CONTENEDORES -->
    <div class="cont">
        <article data-id="r1-c0-sC0">
            one
            <section data-id="r1-c1-sC0">   
                one:A
            </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>
        <article data-id="r3-c0-sC0">
            three
        </article>
        <article data-id="r4-c0-sC0">
            four
        </article>
        <article data-id="r5-c0-sC0">
            five
        </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;
    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

//JSON menu definition
var List = [{
    props: {
        "data-id": "r1-c0-sC0",
        text: "one",
        title: "description one" },
    sub: [{
        props: {
            "data-id": "r1-c1-sC0",
            text: "one:A",
            title: "description one:A" } }, {
        props: {
            "data-id": "r1-c2-sC0",
            text: "one:B",
            title: "description one:B" } }, {
        props: {
            "data-id": "r1-c3-sC0",
            text: "one:C",
            title: "description one:C" } }] }, {
    props: {
        "data-id": "r2-c0-sC0",
        text: "two",
        title: "description two" },
    sub: [{
        props: {
            "data-id": "r2-c1-sC0",
            text: "two:A",
            title: "description two:A" } }, {
        props: {
            "data-id": "r2-c2-sC0",
            text: "two:B",
            title: "description two:B" } }, {
        props: {
            "data-id": "r2-c3-sC0",
            text: "two:C",
            title: "description two:C" } }] }, {
    props: {
        "data-id": "r3-c0-sC0",
        text: "three",
        title: "description three" },
    sub: [{
        props: {
            "data-id": "r3-c1-sC0",
            text: "three:A",
            title: "description three:A" } }, {
        props: {
            "data-id": "r3-c2-sC0",
            text: "three:B",
            title: "description three:B" } }, {
        props: {
            "data-id": "r3-c3-sC0",
            text: "three:C",
            title: "description three:C" } }] }, {
    props: {
        "data-id": "r4-c0-sC0",
        text: "four",
        title: "description four" },
    sub: [{
        props: {
            "data-id": "r4-c1-sC0",
            text: "four:A",
            title: "description four:A" } }, {
        props: {
            "data-id": "r4-c2-sC0",
            text: "four:B",
            title: "description four:B" } }, {
        props: {
            "data-id": "r4-c3-sC0",
            text: "four:C",
      ...