Menu Imagen con Mootools

Javascript, Scripts, Diseño Web, Web 2.0

Phatfusion nos muestra otra manera de construir nuestro menú de navegación. Esta vez utilizando Mootools ha creado un menú con imágenes realmente muy agradable, y el cual es prácticamente similar al utilizado precisamente en Mootools.net, El mismo posee un efecto persiana que apuesto les agradara. Sin duda es un menú realmente bonito y a la vez realmente fácil de utilizar.

Ver Demo – Descargar ejemplo

Instalación:

Descargamos nuestro paquete con las librerías (imageMenu.js y mootools.js)
Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada.

PLAIN TEXT

JavaScript:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imageMenu.js"></script>

NOTA: Verificamos bien en “src” que la localización de los script sea la correcta.
En nuestra hoja de estilo:

PLAIN TEXT

CSS:

/*Images menu*/
#kwick {
position: relative;
/*border-bottom: 3px double #333;*/
margin-top: 20px;
}
#kwick ul{
list-style:none;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 97px;
/*padding: 10px;*/
background: #fff;
/*border-right: 5px solid #202020;*/
border-right: 2px solid #fff;
}
#kwick .kwick span {
display: none;
}
#kwick .opt1 {
outline: 0; background: #9ce782 url(../images/landscapes.jpg) ;
}
#kwick .opt2 {
outline: 0; background: #92bdfa url(../images/people.jpg);
}
#kwick .opt3 {
outline: 0; background: #faa892 url(../images/nature.jpg);
}
#kwick .opt4 {
outline: 0; background: #e78282 url(../images/urban.jpg);
}
#kwick .opt5 {
outline: 0; background: #000 url(../images/abstract.jpg);
border-right: 0;
}

Menu Contenido

PLAIN TEXT

HTML:

<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" href="http://www.xyberneticos.com/" ></a></li>
<li><a class="kwick opt2" href="http://www.xyberneticos.com/" ></a></li>
<li><a class="kwick opt3" href="http://www.xyberneticos.com/"></a></li>
<li><a class="kwick opt4" href="http://www.xyberneticos.com/" ></a></li>
<li><a class="kwick opt5" href="http://www.xyberneticos.com/" ></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
</script>

Nota Nº1:

PLAIN TEXT

JavaScript:

{openWidth:200}

Asigna el ancho en px que tendrán nuestras imágenes. Para en el momento de realizar la transición este finalice al alcanzar los px especificados.
Nota Nº2:
Si deseamos agregar mas enlaces a nuestro menú, simplemente crearemos una nueva imagen, siguiendo el tamaño de las ya creadas anteriormente.
Luego en nuestra hoja de estilo agregaremos una nueva clase, con el nombre de esta nueva imagen.
Por ejemplo Ej: Si llegamos a crear anteriormente hasta la clase “kwick .opt5” seguiremos con

PLAIN TEXT

CSS:

#kwick .opt6 {
outline: 0; background: #000 url(../images/NuevaImagen.jpg);
border-right: 0;
}

A continuación, a la lista de nuestro menú le agregaremos este nuevo link con su determinada clase.

PLAIN TEXT

HTML:

<li><a class="kwick opt6" href="http://www.xyberneticos.com/" ></a></li>

Via webappers

Compartelo

Daniel Barros said,

Wrote on September 23, 2007 @ 14:10

Hola. Hace "descubrí" esta página, muy buena. Sobre este artículo quiero resolver una duda ¿cómo puedo hacer para que el menú con sus imágenes quede centrado en la página independientemente de la resolución de pantalla que se emplee?
Muchas gracias a las posibles soluciones.
Un cordial saludo. Daniel.
Pamoorama - Biblioteca Javascript para visualizar imágenes panorámicas | pixelco.us blog said,

Wrote on September 24, 2007 @ 12:55

[...] Menu Imagen con Mootools - XYbernéticos [...]
Menú acordeón en Flash « Xyberneticos said,

Wrote on March 7, 2008 @ 2:34

[...] Style Flash Menu, es un bonito menú acordeón muy similar a ImageMenu realizado en mootools solo que esta vez basado completamente en flash. En este menú, si posees un [...]
Menú acordeón en Flash | Groovin' High said,

Wrote on March 10, 2008 @ 9:20

[...] Style Flash Menu, es un bonito menú acordeón muy similar a ImageMenu realizado en mootools solo que esta vez basado completamente en flash. En este menú, si posees un [...]
Menú acordeón en Flash « Indigo`s Blog said,

Wrote on March 12, 2008 @ 12:50

[...] Style Flash Menu, es un bonito menú acordeón muy similar a ImageMenu realizado en mootools solo que esta vez basado completamente en flash. En este menú, si posees un [...]
Mis Proyectos » Blog Archive » Imagemenu, excelente menu grafico con efecto acordion said,

Wrote on March 24, 2008 @ 20:41

[...] PLAIN TEXT [...]
Manuel said,

Wrote on March 31, 2008 @ 0:48

Hola, muy buen efecto, tengo una pagina con marcos y no logro hacer el vinculo al maiframe, si alguien me puede ayudar, gracais de ante mano.

Saludos
Menu Kwicks con jQuery « Xyberneticos said,

Wrote on April 19, 2008 @ 5:24

[...] oficial de MooTools, el cual posee un efecto denominado “kwicks” y el cual en una oportunidad comente aquí (basado en MooTools). Pero hoy acabo de encontrar este mismo menú, que se caracteriza por generar [...]