Construir un menú Web con Master Page y JQuery

20. December 2010 21:07 by Oscar.SS in Desarrollo Web  //  Tags: , ,   //   Comments (0)

En las aplicaciones Web es habitual tener un menú principal, normalmente horizontal, en la cabecera de la página. Este menú presenta a los usuarios el contenido principal de la Web permitiendoles navegar con facilidad por la misma. Por ejemplo un menú como el siguiente:

 

 

Este menú consta de 5 imágenes, una por cada botón que puede pulsar el usuario.

Voy a resumir en pocos pasos la funcionalidad que deberá tener este menú.

1- Cuando los usuarios pasen el ratón por encima de los distintos botones del menú, aparecera una pequeña marca, o cambiará de color el botón, o cualquier otro efecto que se os ocurra, para informar al usuario de que esta zona de la página "tiene vida".

 

 

En este caso, esta pequeña marca la conseguimos con otra imágen del botón, que contiene este efecto. Es decir, que tendremos 5 imágenes para los botones sin pulsar y 5 imágenes para los botones pulsados.

2- Cuando el usuario esté en una página concreta, el botón del menú relacionado con esta página deberá quedar marcado con el efecto que diseñamos en el paso anterior. Así los usuarios siempre tendrán la certeza de que página están visitando. Estos pequeños detalles de diseño centrado en el usuario son más importantes de lo que parecen.

Naturalmente si tenemos una web con varias páginas de contenido, lo más recomendable es que utilicemos una Master Page. El código HTML de nuestro menú lo incluiremos en la Master Page y al referenciar el resto de páginas a esta, no tendremos que repetir el mismo código en todas la páginas.

 

Paso 2. Marcar el botón al entrar al contenido de una página.

Dado que el menú se encuentra en la Master Page tendremos que acceder a ella desde las páginas de contenido. Para ellos pondremos un código como el siguiente en el evento Load de las páginas de contenido.

    protected void Page_Load(object sender, EventArgs e)
    {
        var img 
(System.Web.UI.HtmlControls.HtmlImage)this.Master.FindControl("imgInstalaciones");
        
img.Src "img/home/instalaciones_on.jpg";
    
}

Os recomiendo que leais este artículo para entender mejor el código anterior. Fijaros que el nombre de la imágen tiene un sufijo _on. Ahora mismo veremos porque.

 

Paso 1. Efecto onMouseOver y onMouseOut.

Con JQuery implementamos la funcionalidad para que los botones cambien la imágen, o cualquier otro efecto, al pasar el ratón por encima.

$(document).ready(function () {
    $(
'.menu img').hover(
        
function () {
            
var src $(this).attr('src').replace('_off''_on');
            
$(this).attr('src', src);
        
},
        
function () {
            
var src $(this).attr('src').replace('_on''_off');
            if 
(permitirReplaceOnOff(src)) {
                $(
this).attr('src', src);
            
}
        })
;
});

La función hover() de JQuery toma dos parámetros como funciones, que representan respectivamente el evento onMouseOver y onMouseOut. Lo que hacemos en cada caso, para intercambiar entre el botón activo y el botón inactivo, es reemplazar en el atributo src de la imágen el sufijo _on por el sufijo _off.

Fijaros que en la segunda función (evento onMouseOut), tenemos una condición para evitar que se produzca el cambio de la imágen. ¿Por qué hacemos esto?.

Una vez que el usuario pulsa un botón, desde el evento Load de servidor establecemos la imágen que representa el botón activo. Pero después de pulsar, el usuario moverá el ratón y saldrá del botón disparando el evento de cliente onMouseOut y revirtiendo el cambio que hemos realizado desde el servidor.

function permitirReplaceOnOff(src) {
    var permitir 
= true;
    
var urlActual window.location.pathname;

    if 
(src.indexOf('casos_exito') !-&& urlActual.indexOf('CasosExito') !-1) {
        permitir 
= false;
    
}

    
if (src.indexOf('contacto') !-&& urlActual.indexOf('Contacto') !-1) {
        permitir 
= false;
    
}

    
if (src.indexOf('horarios') !-&& urlActual.indexOf('Horarios') !-1) {
        permitir 
= false;
    
}

    
if (src.indexOf('instalaciones') !-&& urlActual.indexOf('Instalaciones') !-1) {
        permitir 
= false;
    
}

    
if (src.indexOf('servicios') !-&& urlActual.indexOf('Servicios') !-1) {
        permitir 
= false;
    
}

    
return permitir;
}

Lo que hacemos es comparar respectivamente cada imágen del menú con cada página de contenido. Y cuando coincidan, no dejar que se dispare el evento onMouseOut. Esta solución es un poco pobre pero...funciona. Se admiten sugerencias  ;-)

Recent Comments

Comment RSS

Month List