Diseñar para la web, requiere de un poco de inspiración, por eso no es raro que constantemente me sorprenda con sitios verdaderamente creativos y originales (Saludos yatta).
Soluciones para esas ideas creativas hay muchas, para este post supondremos que deseamos realizar un panel de navegación horizontal para nuestro sitio solo que para hacerlo más interesante; este desplegara un panel con un grupo de opciones en cuanto se posicione el puntero del mouse sobre una opción del menú; con esto se pretende mejorar la navegación del sitio y por supuesto que la usabilidad del mismo. Véase el siguiente ejemplo:
Nuestro ejemplo sera simple y con un solo grupo de opciones que estará coherentemente agrupada, aunque bien pudiera hacerse con CSS, habría que explorar las incompatibilidades que se puedan generar entre los navegadores Web, por esta razón el problema será resuelto usando JQuery y un Plugin de este llamado hoverIntent
Diseño
Supondremos que el sitio web, es de una ferretería, por lo que incluiremos una opción en el menú que diga promociones, el cual desplegará las promociones de forma clasificada
Markup
Se hace un menú sencillo de forma horizontal:
Después se añade un
div al enlace que contendrá el grupo de opciones que en este caso es para "Promociones", obsérvese la clase
megamenu que se ha agregado que nos permite indicar el Mega menú.
Estilo
Es momento de darle estilo y sentido a lo que se ha echo, se muestra una parte del archivo CSS en el cual se da formato a los tipos de letra, elementos
div etc.:
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 11px;
background: #fff;
color: #333;
}
h1, h2, h3, h4, h5, h6, p, ul, li {
font-size: 1em;
margin: 0;
padding: 0;
}
div#banner {
background: transparent url(logo.gif) top left no-repeat;
padding-top: 12px;
padding-bottom: 36px;
}
div#banner h1, div#navegacion h2 {
margin: 0;
padding: 0;
}
div#banner h1 a {
display: block;
width: 270px;
height: 120px;
}
div#banner h1 a span, div#banner .skip {
position: absolute;
top: -10000px;
left: -10000px;
}
ul#navegacion {
background: #940;
color: #fff;
margin: 0;
padding: 0.3em 0em;
}
ul#navegacion li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#navegacion h2, ul#navegacion h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}
ul#navegacion li a {
color: #fff;
text-decoration: none;
padding: 0 0.4em;
}
ul#navegacion li a:hover {
text-decoration:blink;
}
ul#navegacion li.megamenu a {
background: transparent url(arrow.gif) center right no-repeat;
padding: 0 1.2em;
}
ul#navegacion li.megamenu a:hover {
text-decoration: underline;
}
ul#navegacion div {
display: none;
}
ul#navegacion li.megamenu div {
border: 1px solid #dda;
width: 18em;
position: absolute;
top: 1.6em;
left: 0em;
padding: 1.3em;
background: #ffc;
color: #930;
}
ul#navegacion li.hovering div {
display: block;
}
ul#navegacion li.megamenu div a {
color: #300;
padding: 0;
background-image: none;
text-decoration: underline;
}
ul#navegacion div h3 {
color: #f70;
font-weight: bold;
font-size: 1.1em;
}
ul#navegacion div p {
margin: 0 0 0.8em 0;
padding: 0;
}
Lo interesante: Script
Para realizar este ejemplo existen script's en la web que son bienvenidos también, aunque como ya se ha dicho para este ejemplo se usa JQuery que bueno semejante monstruo tiene muchas más aplicaciones que esta que le estamos dando.
Entonces se agrega una referencia desde nuestro HTML al JQuery y otra más al Plugin hoverIntent:
.
.
script src="completed_files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8">
.
.
.
script src="completed_files/jquery.hoverIntent.minified.js" type="text/javascript" charset="utf-8">
.
.
Despues hay que escribir un par de funciones que agrega y otra remueve la clase
hovering y se especifican los parámetros que indican la reacción ante el puntero del mouse.
$(document).ready(function() {
function addMega(){
$(this).addClass("hovering");
}
function removeMega(){
$(this).removeClass("hovering");
}
var megaConfig = {
interval: 300,
sensitivity: 3,
over: addMega,
timeout: 500,
out: removeMega
};
$("li.mega").hoverIntent(megaConfig)
Codigo fuente
Ejemplo del HTML aquí mostradoEjemplo del CSS aquí mostradoEnlaces
[http://cherne.net/brian/resources/jquery.hoverIntent.html ]
Me gustaría hablar en otros post sobre JQuery, aunque apenas estoy aprendiendo de sus bondades si me gustaria sacarle más provecho a su funcionalidad, pero bueno espero haberlos dejado picado con la información, me gustaría que hablaran sobre algunas desventajas que por cierto es un tema del que tal vez hable después.
