Para usar este llamativo menú desarrollado por dhteumeuleu, necesitamos un script y algo de CSS simple.
El Script:
<script type='text/javascript'>(Lo marcado en azul puede modificarse para personalizar el estado mínimo inicial y al máximo que se muestra al expandirse).
//<![CDATA[
// ================================================================
// ------ dock menu -------
// script by Gerard Ferrandez - Ge-1-doot - February 2006
// http://www.dhteumeuleu.com
// ================================================================
var dock = function (dock, sMin, sMax) {
/* ---- private vars ---- */
var xm = xmb = ov = 0;
var M = true;
var icons = document.getElementById(dock).getElementsByTagName('img');
var N = icons.length;
var s = sMin;
var ovk = 0;
var addEvent = function (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
var pxLeft = function(o) {
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
return x;
}
for(var i=0;i<N;i++) {
var o = icons[i];
o.style.width = sMin+"px";
o.style.height = sMin+"px";
o.className = "dockicon";
}
var run = function() {
for(var i=0;i<N;i++) {
var o = icons[i];
var W = parseInt(o.style.width);
if(ov && ov.className=="dockicon") {
if(ov!=ovk){
ovk=ov;
document.getElementById("legend").innerHTML = ov.lang;
}
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+.5);
} else {
s = Math.max(s-.5,sMin);
W = Math.max(W-N,sMin);
}
o.style.width = W+"px";
o.style.height = W+"px";
}
if(s >= sMax) M = false;
}
addEvent(document, 'mousemove', function (e) {
if(window.event) e=window.event;
xm = (e.x || e.clientX);
if(xm!=xmb){
M = true;
xmb = xm;
}
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
});
setInterval(run, 16);
};
window.onload = function() {
dock("dock", 48, 128);
}
//]]>
</script>
El CSS:
*Esto se puede colocar entre las etiquetas <b:skin> y </b:skin> de la plantilla o entre <head> y </head> añadiendole las etiquetas <style type=" text/css"> y </style>.
#dock {
position: absolute;
bottom: 1em;
width: 100%;
text-align: center;
left: 0px;
}
#dock a:visited{
text-decoration: none;
}
#dock a{
text-decoration: none;
margin: -2px;
}
#dock img {
border: none;
width: 0px;
}
#legend {
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
font-family: arial;
font-weight: bold;
font-size: 1em;
color: #000;
}
El HTML:
<div id="dock">
<a href="URL_enlace1" target="_blank"><img src="URL_imagen1" lang="el texto 1"></a>
<a href="URL_enlace2" target="_blank"><img src="URL_imagen2" lang="el texto 2"></a>
<a href="URL_enlace3" target="_blank"><img src="URL_imagen3" lang="el texto 3"></a>
<!-- Para añadir más: <a href="URL_enlace4" target="_blank"><img src="URL_imagen4" lang="el texto 4"></a> --> </div>
<div id="legend"></div>
No hay comentarios:
Publicar un comentario