Menu and content system

Simple changes... Remove the identifier "rx-cx-sCx" from element's ID attribute; instead use data-id attribute. I have created two new jQuery functions: .havingData() and .diffPrev()

by alano

HTML

<ul class= "menuInferior">

    <!-- START CONTAINER RUBRO -->
    <li class="contenedorMenuInf" id="contenedorRubro">
        <ul class="contenedor">   
            <li><div class="contMenuInf" data-id="r1-c0-sC0">one
                <ul class= "menuInferior">

                    <!-- START CONTAINER CATEGORIA -->
                    <li class="contenedorMenuInf" id= "contenedorCategoria">
                        <ul class="contenedor">   
                            <li><div class="contMenuInf" data-id="r1-c1-sC0">
                                one:A
                            </div></li>
                            <li><div class="contMenuInf" data-id="r1-c2-sC0">
                                one:B
                            </div></li>
                            <li><div class="contMenuInf" data-id="r1-c3-sC0">
                                one:C
                            </div></li>
                        </ul>   
                    </li>
                    <!-- END CONTAINER CATEGORIA -->

                    <!-- START BUTTON CATEGORIA -->    
                    <li class="botonMenuInf" id="botonCategoria">
                        <ul class="boton">   
                            <li data-id="r1-c1-sC0">one:A</li>
                            <li data-id="r1-c2-sC0">one:B</li>    
                            <li data-id="r1-c3-sC0">one:C</li>
                        </ul>   
                    </li>
                    <!-- END BUTTON CATEGORIA -->    

                </ul>         
            </div></li>
            <li><div class="contMenuInf" data-id="r2-c0-sC0">
                two
            </div></li>
            <li><div class="contMenuInf" data-id="r3-c0-sC0">
                three
            </div></li>
            <li><div class="contMenuInf" data-id="r4-c0-sC0">
                four
            </div></li>
            <li><div class="contMenuInf" data-id="r5-c0-sC0">
                five
            </div></li>
       ...

CSS

/* START GENERAL */
ul.menuInferior:first-child {   
    margin-left:100px; 
}
ul.menuInferior li#botonRubro > ul,
ul.menuInferior li#botonCategoria > ul{    
    font:17px arial,sans-serif;    
    position:absolute;
    padding:5px 0;
    width:300px;                                
}
ul.menuInferior li#botonRubro > ul > li,
ul.menuInferior li#botonCategoria > ul > li{
    display: inline;
    cursor:pointer;        
    text-align:center;
    letter-spacing:1px;        
    padding:5px;        
    margin-right:-5px;            
}
ul.menuInferior li#botonRubro > ul > li.activeFborde{
    display: inline;
    height:11px;    
    padding:0 5px;    
    border-right:1px solid  #000;                       
}
ul.menuInferior li#botonRubro > ul > li.activeFcolor {
    border-left:1px solid  #000; 
    border-right:1px solid  #000;         
}
ul.contenedor > li > div {
    display: none;
    position:absolute;    
}
/* END GENERAL */

/* START RUBRO */
ul.menuInferior li#botonRubro > ul{    
    margin-top:250px;
    margin-left:-80px;    
    background-color: #666;                       
}
ul.menuInferior li#botonRubro > ul > li{    
    color:#CCC;           
}
ul.menuInferior li#botonRubro > ul > li:hover{    
    color: #FFF;           
}
ul.menuInferior li#botonRubro > ul > li.activeFcolor {    
    background-color:#FC0; 
    color:#000;
    padding:6px 5px;        
}
ul.menuInferior #contenedorRubro ul.contenedor > li > div  {
    margin-top:3px;
    margin-left:-90px;
    width:450px;
    height:233px;    
    z-index:1;
    background-color:#F00;
}
/* END RUBRO */

/* START CATEGORIA */
ul.menuInferior li#botonCategoria > ul{    
    margin-top:200px;
    margin-left:-90px;
    background-color:#FFF;
    border:1px solid  #000;                        
}
ul.menuInferior li#botonCategoria > ul > li{    
    color: #4D4D4D;            
}
ul.menuInferior li#botonCategoria > ul > li:hover{    
    color: #000;          
}
ul.menuInferior li#botonCategoria > ul...

JavaScript

// Remove selections where specified Data key/value does not match
$.fn.havingData = function (key, valueOrRegex) {
    var value = (valueOrRegex instanceof RegExp) ? valueOrRegex : new RegExp(valueOrRegex);
    return this.filter(function () { return $(this).data(key).search(value) >= 0; });
};

// Return difference between current and previous selections
// ordinal specifies how many filtered steps to go back in chain
// positive ordinal specifies that previous selection is subtracted from current
// negative ordinal specifies that current selection is subtracted from previous
// default value of ordinal is +1
$.fn.diffPrev = function (ordinal) {
    var steps = isNaN(ordinal) ? 1 : Math.abs(ordinal); //default +1
    var mode = (steps >= 0) ? true : false;
    var $previous = this;
    for (var i = 0; i < steps; i++) { $previous = $previous.prevObject; }
    return mode ? this.not($previous) : $previous.not(this);
};

$(document).ready(function () {

    var $botones = $('li.botonMenuInf > ul > li');
    var $contentes = $('ul.contenedor > li > div.contMenuInf');
    $contentes.havingData('id', /r1-c[01]/).show(); //show r1-c0 and r1-c1 contents by default
    $botones.filter(':first-child').addClass('activeFcolor').diffPrev().addClass('activeFborde'); //show first buttons

    $botones.click(function () {
        var idBoton = $(this).data('id');
        $(this).addClass('activeFcolor activeFborde').siblings().removeClass('activeFcolor activeFborde');
        $contentes.havingData('id', idBoton).show().closest('ul.contenedor').find(' > li > div.contMenuInf').diffPrev(-2).hide();
        return false;
    });

});