Posted by admin in 
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
