[Aporte] Sliding Menu JS + CSS

[barclow]

Hola a todos, les traigo un Sliding Menú Creado por mi mismo.

Menu con sólo 1 nivel que al hacer click, deja marcado con color diferente donde estás parado. Muy util para navegabilidad.

Pueden ver el Ejemplo aquí: [URL="http://barclow.exofire.net/barclow/menu/menu.html"]¡Click Me![/URL]

Procedo a comentar poner el código y a comentarlo, si quieren bajarlo, les dejo el Ejemplo en html para que lo bajen: [URL="http://barclow.exofire.net/barclow/slidingMenu.rar"]¡Click Me![/URL] (carpeta menu, el unico archivo de ahí)

la lógica es ponerle id="n" a los menus e id="n-m" a los sub menus, es decir:
<tr id="1" class="Menu">
</tr>
<tr id="1-1" class="sub">
</tr>

eso quiere decir que la fila 1-1 es sub menu de la fila 1.

Cada fila lleva asociado un evento en javascript, los scripts están comentados.
Dudas, consultas y recomendaciones, ¡¡yo feliz!!

Código Javascript:

/* Esta función fue hecha por mi, y es de libre uso para cualquiera que quiera usarla.  *
 * Cualquier comentario, duda o recomendación pueden hacerla a [email protected].       *
 *                                                                                      *
 *                  Gracias                                                             */
function menu(fila)
{
    var tabla = document.getElementById("tabla"); //Traigo la tabla
    
    for(i = 1; i<= tabla.rows.length; i++) { //Estos bucles son para volver al css Sub a todas las celdas.
        for(j = 1; j<= tabla.rows.length; j++) {
            var sub = document.getElementById(i + "-" + j); 
            if (sub != null) {
                sub.style.display='none';
            }
        }
    }
    
    
    for(i = 1; i <= tabla.rows.length; i++)  //Recorrer filas de la tabla
    {
        var sub = document.getElementById(fila.id + "-" + i); //Traigo la celda
        
        if(sub != null) //Si la celda es nula no hace nada
        {
            if(sub.style.display == 'block')  //Si la celda con esa id existe, entonces pregunta si debe ocultar o mostrar
            {
                sub.style.display='none'; //Oculta
            }
            else{
                sub.style.display='block'; //Muestra
            }
        }
    }
}
function sub(fila, url, frame){
    var tabla = document.getElementById("tabla"); //Traigo la tabla
    for(i = 1; i<= tabla.rows.length; i++) { //Estos bucles son para volver al css Sub a todas las celdas.
        for(j = 1; j<= tabla.rows.length; j++) {
            var sub = document.getElementById(i + "-" + j); 
            if (sub != null) {
                sub.setAttribute("class", "Sub");
            }
        }
    }
    fila.setAttribute("class", "Selected"); //Para 'iluminar' la última celda seleccionada
    top.frames[frame].location.href = url; //Carga la url en la frame seleccionada.
}
 

Código CSS:

.Menu
{
    background-image:url(../imagenes/menuGabo/menu.png);
    background-repeat:no-repeat;
    text-decoration: none;
    vertical-align: middle;
}
.Menu td
{
    width:150px;
    height:32px;  
    padding-left:10px;
    vertical-align: middle;
}
.Menu a
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight:bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:10pt;
    vertical-align: middle;
}
.Sub
{
    text-decoration:none;
    display:none;
    background-image:url(../imagenes/menuGabo/sub2.png);
    background-repeat:no-repeat;
    text-decoration: none;
    vertical-align: middle;
}
.Sub td
{
    width:150px;
    height:32px;
    padding-left:20px; 
    vertical-align: middle;
}
.Sub a
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight:bold;
    font-family: Arial, Helvetica, sans-serif; 
    font-size:small;
    vertical-align: middle;
}
.Selected
{
    text-decoration:none;
    display:none;
    background-image:url(../imagenes/menuGabo/selected.png);
    background-repeat:no-repeat;
    text-decoration: none;
    vertical-align: middle;
}
.Selected td
{
    width:150px;
    height:32px;
    padding-left:20px; 
    vertical-align: middle;
}
.Selected a
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight:bold;
    font-family: Arial, Helvetica, sans-serif; 
    font-size:small;
    vertical-align: middle;
}
 

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Página sin título</title>
    <link rel="Stylesheet" type="text/css" href="../Estilos/menuGabo.css" />
    <script type="text/javascript" src="../js/menuGabo.js" ></script>
</head>
<body>
    <form id="form1">
    <div>
        <table id="tabla">
            <tr id="1" class="Menu" onclick="menu(this);" >
                <td>
                    <a href="#" >Menu 1</a>
                </td>
            </tr>
            <tr id="1-1" class="Sub" onclick="sub(this, '#', 'parent');" >
                <td>
                    <a href="#">subItem 1</a>
                </td>
            </tr>
            <tr id="1-2" class="Sub" onclick="sub(this, '#', 'parent');" >
                <td >
                    <a href="#">subItem 2</a>
                </td>
            </tr>
            <tr id="2" class="Menu" onclick="menu(this);">
                <td>
                     <a href="#" >Menu 2</a>
                </td>
            </tr>
            <tr class="Sub" id="2-1" onclick="sub(this, '#', 'parent');">
                <td >
                    <a href="#">SubItem 3</a>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>