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.
<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:
#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
<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:
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
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.
Via webappers
Loading ...
Daniel Barros
21-09-2007
Permalink
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
21-09-2007
Permalink
[...] Menu Imagen con Mootools - XYbernéticos [...]
Menú acordeón en Flash « Xyberneticos
21-09-2007
Permalink
[...] 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
21-09-2007
Permalink
[...] 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
21-09-2007
Permalink
[...] 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
21-09-2007
Permalink
[...] PLAIN TEXT [...]
Manuel
21-09-2007
Permalink
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
21-09-2007
Permalink
[...] 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 [...]