Configurable menu and content system

Uses jquery.list.js plugin

HTML

<ul class= "menuInferior"><!-- inicio menuInf -->
<!-- INICIO CONTENEDOR-RUBRO 1 -->
 <li class="contenedorMenuInf" id= "contenedorRubro"><!-- inicio contenedorRubro -->
  <ul class="contenedor">   
    <li><div class="contMenuInf" id="contMenuInf_r1-c0-sC0"><!-- inicio contMenuInf_r1-c0-sC0 -->  One      
      <ul class="menuInferior"><!-- inicio menuInf -->
      <!-- INICIO CONTENEDOR-CATEGORIA r1-c1 -->
       <li class="contenedorMenuInf" id="contenedorCategoria"><!-- inicio contenedorCategoria -->
         <ul class="contenedor">   
           <li><div id="contMenuInf_r1-c1-sC0"><!-- inicio contMenuInf_r1-c1-sC0 -->           One: A
            
                 <ul class= "menuInferior"><!-- inicio menuInf -->
                 <!-- INICIO CONTENEDOR-SUBCATEGORIA r1-c1-sC1 -->
                  <li class="contenedorMenuInf" id= "contenedorSubCategoria"><!-- inicio contenedorSubCategoria -->
                    <ul class="contenedor">   
                      <li><div id="contMenuInf_r1-c1-sC1"><!-- inicio contMenuInf_r1-c1-sC1 -->            
                  One: A1
                      </div></li><!-- fin contMenuInf_r1-c1-sC1 -->
                      <li><div id="contMenuInf_r1-c1-sC2"><!-- inicio contMenuInf_r1-c1-sC2 -->
                   One:A2
                      </div></li><!-- fin contMenuInf_r1-c1-sC2 -->
                      <li><div id="contMenuInf_r1-c1-sC3"><!-- inicio contMenuInf_r1-c1-sC3 -->
                      One:A3
                      </div></li><!-- fin contMenuInf_r1-c1-sC3 -->  
                    </ul>   
                  </li><!-- fin contenedorSubCategoria -->
                 <!-- FIN CONTENEDOR-SUBCATEGORIA r1-c1-sC1 -->
                 <!-- INICIO BOTONES-SUBCATEGORIA r1-c1-sC1 -->
                  <li class="botonMenuInf" id="botonSubCategoria"><!-- inicio botonSubCategoria -->
                    <ul class="boton">   
                      <li id="botMenuInf_r1-c1-sC1">One:A1</li>
                      <li...

CSS

ul.menuInferior {	
	margin-left:100px;			
}
.botonMenuInf .arrowMinf {		
    position:absolute;    
	color:#666;
    left:45%;
	z-index:5;	
}

    /* INICIO GENERALES */
ul.menuInferior ul.boton
,ul.modelos {	
	font:17px arial,sans-serif;		
	padding:5px 0;									
}
ul.menuInferior ul.boton {
	width:500px;
	position:absolute;								
}
ul.menuInferior ul.boton > li {
	position: relative;
	display: inline;
	cursor:pointer;		
	text-align:center;
	letter-spacing:1px;		
	padding:0 6px 0 6px;		
	margin-right:-6px;			
}
ul.contenedor > li > div {
	display: none;
	position:absolute;	
}
    /* FIN GENERALES */

    /* INICIO RUBROS */
ul.menuInferior li#botonRubro > ul {	
	margin-top:342px;
	margin-left:0px;	
	background-color: #666;/*gris medio fuerte*/						
}
ul.menuInferior li#botonRubro > ul > li {	
	color:#CCC;/*gris suave*/	
	border-right:1px solid  #000; /*negro fuerte*/			
}
ul.menuInferior li#botonRubro > ul > li:hover {	
	color: #FFF;/*blanco*/			
}
ul.menuInferior li#botonRubro > ul > li.activeFcolor {
	border-left:1px solid  #000; /*negro fuerte*/
	border-right:1px solid  #000; /*negro fuerte*/		
	background: url(../imgs/productos/fondo_barra_division_rubro.jpg) repeat-x;/*naranja degradado*/ /*activada*/	
	color:#000;
	padding:6px 5px;		
}
ul.menuInferior #contenedorRubro ul.contenedor > li > div {
	margin-top:3px;
	margin-left:0;
	width:500px;
    height:250px;	
	z-index:1;
    background-color:#F00;
}
.botonMenuInf#botonRubro .arrowMinf {
	top:-15px;	 
	display: block;	  
}
    /* FIN RUBROS */

    /* INICIO CATEGORIA */
ul.menuInferior li#botonCategoria > ul {	
	margin-top:275px;
	margin-left:-100px;
	background-color:#FFF;
	border:2px solid  #666;						
}
ul.menuInferior li#botonCategoria > ul > li {	
	color: #4D4D4D;/*gris medio fuerte*/
	border-right:1px solid  #4D4D4D; /*gris medio fuerte*/				
}
ul.menuInferior li#botonCategoria > ul > li:hover {	
	color: #000;/*negro*/			
}
ul.menuInferior li#botonCategoria > ul > li.activeFcolor...

JavaScript

/* A- INICIO MENU INFERIOR TABS */
$(document).ready(function(){
			
$('.botonMenuInf > ul.boton > li:first-child').append('<span class="arrowMinf">▼</span>').addClass('activeFcolor');//agregar flecha dentro del primer li de .botones	 y mostrarlo activo
$('ul.contenedor > li:first-child > div').show();// mostrar solo el primer div contenedor descendiente de li.contenedorMenuInf  
 
  $('.botonMenuInf ul.boton > li').click(function () {//Cuando el li sea clickeado
	var idBoton    =  $(this).attr('id').substr(11);//seleccionamos el atributo id del botón
	var botonSelecc    =  $('div[id=contMenuInf_'+idBoton+']');//seleccionamos el contenedor 
	var botonTodo = $('div[id=contMenuInf_'+idBoton+']').closest('ul.contenedor').children('li').children('div');//del "id" seleccionado; encontrar su ul.contenedor más cercano; seleccionar sus hijos (li); y los hijos de estos (div)   
   
   $(this).closest('.boton').find('span.arrowMinf').remove();//eliminar todos los arrowMinf dentro de .botones
   $(this).append('<span class="arrowMinf">▼</span>');//solo mostrar la flecha según el botón seleccionado	
   $(this).closest('ul.boton').children('li').removeClass('activeFcolor');//eliminar el fondo predeterminado: de color   
   $('li[id=botMenuInf_'+idBoton+']').addClass('activeFcolor');//mostramos con color al botón que elijamos   
   $(botonTodo).not(botonSelecc).hide();
   $(botonSelecc).show();//mostrar el contenedor seleccionado por el botón

	return false;      
  });
});
     /* A- FIN MENU INFERIOR TABS */