Archivo para la categoría ‘HTML’ .

Una forma de construir un menú de navegación con imágenes muy agradable usando el efecto persiana de Mootools.

Pasos para instalarlo:

1.-Descargamos el fichero (Guardar como) con las librerías (imageMenu.js y mootools.js)

2.-Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada:

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

3.- Insertamos el siguiente código en nuestra hoja de estilos (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;
}

4.-Aquí está el código HTML de nuesto menú en cuestion:

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

5.-Para crear más opciones en el menú debemos hacer lo siguiente:

Continuamos añadiendo las definiciones que necesitemos en la página de estilo de nuestro sitio de la siguiente forma:

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

y a continuación añadimos en el HTML de nuestro menú el link con su determinada clase:

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

Y eso es todo, aquí os dejo la dirección de una demo del funcionamiento del menú .

Compártelo!