Menú Mootools (Image Menu)

El efecto de transición es muy bonito, si se quieren usar imágenes en el menú del blog. Podéis verlo en Imagen. Para variar, necesitamos CSS y un par de scripts, amén del HTML para las imágenes.

Y... lo cuento otro día...

------------------------------

Sigo:

Como comento en mi blog de pruebas, he reformado y adaptado el CSS del Menú a mis necesidades, de manera que he cambiado la configuración del "span" para poder desplegar los vínculos de cada imagen y el color que he elegido para ellos. Además, como la foto del Dragón es pequeña, he añadido un "no-repeat" a la URL, porque prefiero una transición verde, como ha quedado, con la siquiente imagen y vínculo, antes que una repetición. Además, he añadido un "float:right al menú, para que no se me emetira por la cabecera de mi plantilla de pruebas...
Una gran guía para insertar el Menú, podéis encontrarla en Xyberneticos: en el HTML que provee, hallaréis la forma de vincular cada imagen, pero no la configuración del span para que se visualice su contenido (por eso he reformado el código y el CSS).
Una cosa: no creais que vais a obtener un un menú con la descripción del vínculo en el lateral de la imagen, como se ve en el ejemplo de la página "maestra"... porque va inserto dentro de las imágenes, es decir: viene cada vínculo dentro del diseño de la imagen... no es cosa externa.

Y dicho ésto, así lo he hecho yo:

.- Hay que colocar un par de scripts entre el head y /head de la plantilla:


<script src='http://.../mootools.js' type='text/javascript'/>

<script src='http://.../ImageMenu.js' type='text/javascript'/>
Si alguien se arriesga a que se me pierda el Google pages, éstos son mis scripts:

<script src='http://junioscripts.googlepages.com/mootools.js' type='text/javascript'/>

<script src='http://junioscripts.googlepages.com/ImageMenu.js' type='text/javascript'/>

.- Dentro del skin de la plantilla, añadiremos el siguiente CSS:

/*big menu*/



#kwick {

position: relative;

/*border-bottom: 3px double #333;*/

margin-top: 20px;

float:right;

}



#kwick .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: block;

font-weight:bold; color:#fff;

}



#kwick .opt1 {

background: #9ce782 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl2Fjq839irqxa6qsrDPCETDhdMkfn2_V1AS1qIYRam3BNS7rfTXeGrQ5_xJNjyvhzEVPs4i02TllruqEUr52y20dexvlhyphenhyphenLLF2B-9xx5vTDOJNAExSVQ3oAW4zI28xKTz8Pn_cgFXeDoi/s200/Dragon2.jpg) no-repeat;

}



#kwick .opt2 {

background: #92bdfa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJsES0VRif0k1MQBDPk1Vehnu8L-wsPdIfgORDhLBNwoVbXlre1DJ57xaHu7QR9T89XuawG7i4yJHe_lHqCuJnxTqhyLoA5LYe5vNhDPdwDdx1ifxjGbe3jcc9Hzexw3B1LKxtS2pRaLJ/s200/Colinas+azules.jpg);

}



#kwick .opt3 {

background: #faa892 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf2m_4bktsLpIog1K2xTKOefJUu8ukHSbNnQB9K8ZfuZ6lPDx7TWzPxqzH1p1if4DXl9t8yL_6zI4e28OIE8PXDEvX5cLmStGPGIafdYLto9GbztdT9ve68UiVHsvv0r0HJfCjD22adf4U/s200/Invierno.jpg);

}



#kwick .opt4 {

background: #e78282 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzB0QECwqPOsTJXJPtwxZMUfzwQwvHoLVShy2h8WYiwGyTKuitrf4u-SmZRw-kqUwR70041M6tWAFYsnGCjHFYkdISQGH3-jI75Yd6UG2ZJdQTbpHeGfqRyKhKdkg8__wkPVtMnZFqIymk/s200/Nen%C3%BAfares.jpg);

}



#kwick .opt5 {

background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimO6gFP1g5L3d0LzTZtgpC3W5_aiAmHrZhg3L3zTE1G7_WvRVqdCujR8ATdPj7-brniZebamf6-PBiMBeMUtDPCXMAE6R6YdWb_TNNhNYE8IS3uZt59YTVUkrlkAZPR1_hwgaPi0jx4vdK/s200/Puesta+de+sol.jpg);

border-right: 0;

}





]]></b:skin>

.- Y vamos al HTML (al que acompaña un script para determinar la transición):
Lo insertaréis donde os interese tener el menú: en la cabecera del blog, en el footer... donde queráis.

<div id='kwick'>

<ul class='kwicks'>

<a href='http://imagen-junio.blogspot.com/' title='ir al Inicio'><li class='kwick opt1'><span>Inicio&gt;</span></li></a>

<a href='http://cafe-junio.blogspot.com/' title='ir a Epílogo'><li class='kwick opt2'><span>Epílogo</span></li></a>

<a href='http://cuentos-historias.blogspot.com/' title='ir a Revolutum'><li class='kwick opt3'><span>Revolutum</span></li></a>

<a href='http://nada-junio.blogspot.com/' title='ir a Nada'><li class='kwick opt4'><span>Nada</span></li></a>

<a href='http://hiperadri.blogspot.com/' title='ir a El Juego...'><li class='kwick opt5'><span>El Juego de...</span></li></a>

</ul>

</div>

<script type='text/javascript'>

var myMenu = new ImageMenu($$(&#39;#kwick .kwick&#39;),{openWidth:200});

</script>

Y ya está... la verdad es que es más complicado explicarlo que hacerlo. Para mí lo peor de trabajar con imágenes es andar subiéndolas y añadiendo las URL. El resto es "pecata minuta" :D