[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>
 

[barclow]

• [URL="http://barclow.exofire.net/barclow/menu/menu.html"]http://barclow.exofire.net/barclow/menu/menu.html[/URL]
• http://barclow.exofire.net/barclow/menu/menu.html
• [URL="http://barclow.exofire.net/barclow/slidingMenu.rar"]http://barclow.exofire.net/barclow/slidingMenu.rar[/URL]
• http://barclow.exofire.net/barclow/slidingMenu.rar

[jackson666]

Muy bueno che, te felicito...
Me parece que estaria mejor el efecto con el evento onmouseover, pero bueno, es a gusto de cada uno

[barclow]

Iniciado por jackson666

Muy bueno che, te felicito...
Me parece que estaria mejor el efecto con el evento onmouseover, pero bueno, es a gusto de cada uno

eso se aplica a las tablas con grandes cantidades de datos, para mi caso, esta es una tabla que bien podría ir insertada en frames (pq el script requiere pasar por parámetro el frame de destino) y que sirve para mejorar la navegabilidad del sitio.

Es decir, al quedar marcada la última opción que seleccionó el usuario, éste sabe perfectamente dónde está parado dentro del sitio.

Para una tabla de ese estilo ya presentaré un nuevo aporte con el ejemplo. Cuando tenga algo de tiempo.

Saludos

[pixelmuerto]

esta bueno, se parece un poco a las acordeones de jquery.

[barclow]

Me gustaría añadirle algo sí...

cómo lo puedo hacer para que al mostrar las celdas ocultas se ejecute una animación?
es decir, que aparezcan desde arriba hacia abajo...?

[barclow]

Me parece que utilizando la misma rutina de setTimeOut() puedo modificar el valor de posición relativa e ir aumentanto de a poco el valor "y" para que la tabla se mueva


y más tarde el visibility ir aumentandolo desde 0 a 100 gradualmente bajo el mismo esquema


lo intentaré y les cuento qué tal me fué :D



Saludos.-