Las visitas de un blog no son el único factor que hará que este tenga éxito o no en la red.

La experiencia de nuestros visitante y la accesibilidad de la web también son factores determinantes que determinarán que estos usuarios vuelvan o no a visitar asiduamente nuestro blog.

Uno de los elementos más importante para lograr esta accesibilidad son los menús. Un menú bien elaborado, sencillo e intuitivo permitirá a los usuarios encontrar rápidamente la información que busquen.

Meny es un menú muy interesante y llamativo que está desarrollado en formato 3D y que tiene, como principal característica, que al pasar el puntero ratón sobre cualquiera de los botones de nuestra web, estos presenten un efecto 3d elegante y vistoso.

El script es obra de Hakim El Hattab, y cuenta entre sus características el no utilizar jQuery, lo que facilita en gran medida su integración.


Puedes ver el truco funcionando en el siguiente blog de pruebas, sólo pasa el cursor por la flecha para ver este menú en funcionamiento.

Edición de HTML y antes de ]]></b:skin>  agrega lo siguiente:

    /* Meny Menu
    ----------------------------------------------- */
    .meny {
    display: none;
    padding: 20px;
    overflow: auto;
    background: #333;
    color: #eee; /* Color de fondo del menú */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    .meny h4 {
    font-size: 24px; /* Tamaño del título del menú */
    color:#fff; /* Color del título del menú */
    text-align:center;
    }
    .meny ul {
    margin-top: 10px;
    }
    .meny ul li {
    display: inline-block;
    width: 200px;
    list-style: none;
    font-size: 20px;
    padding: 3px 10px;
    }
    .meny-arrow {
    position: absolute;
    z-index: 10;
    border: 10px solid transparent;
    -webkit-transition: opacity 0.4s ease 0.4s;
    -moz-transition: opacity 0.4s ease 0.4s;
    -ms-transition: opacity 0.4s ease 0.4s;
    -o-transition: opacity 0.4s ease 0.4s;
    transition: opacity 0.4s ease 0.4s;
    }
    .meny-left .meny-arrow {
    left: 5px;
    top: 350px;
    margin-top: -16px;
    border-left: 16px solid #333; /* Color de la flecha */
    }
    .meny-right .meny-arrow {
    right: 14px;
    top: 150px;
    margin-top: -16px;
    border-right: 16px solid #333; /* Color de la flecha */
    }
    .meny-top .meny-arrow {
    left: 150px;
    top: 14px;
    margin-left: -16px;
    border-top: 16px solid #333; /* Color de la flecha */
    }
    .meny-bottom .meny-arrow {
    left: 150px;
    bottom: 14px;
    margin-left: -16px;
    border-bottom: 16px solid #333; /* Color de la flecha */
    }
    .meny-active .meny-arrow {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    }.contents {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
Colocar después de <body> o de esta línea: <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’> el siguiente codigo :
<div class='meny'>
<h4>Menús</h4>
<ul>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
</ul>
</div>
<div class='meny-arrow'/>
<div class='contents'>

Aquí tienes que reemplazar URL del enlace por tu URL, y Texto del enlace por tu texto.

Para finalizar añadir antes de  </body> el siguiente código:
</div>
<script>
//<![CDATA[
/*!
* meny 1.2
* http://lab.hakim.se/meny
* MIT licensed
* Created by Hakim El Hattab (http://hakim.se, @hakimel)
*/
var Meny={create:function(a){return(function(){if(!a||!a.menuElement||!a.contentsElement){throw"You need to specify which menu and contents elements to use.";
}if(a.menuElement.parentNode!==a.contentsElement.parentNode){throw"The menu and contents elements must have the same parent.";}var J="top",K="right",c="bottom",N="left";
var F="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style;
var D={width:300,height:300,position:N,threshold:40,overlap:6,transitionDuration:"0.5s",transitionEasing:"ease"};var e={menu:a.menuElement,contents:a.contentsElement,wrapper:a.menuElement.parentNode,cover:null};
var A=e.wrapper.offsetLeft,z=e.wrapper.offsetTop,t=null,r=null,q=null,o=null,f=false,m=false;var l,j,G,n,O,V,S,x,d,B;var w,y,E;Meny.extend(D,a);i();g();
v();C();Q();R();function i(){G="";S="";switch(D.position){case J:l="50% 0%";j="rotateX( 30deg ) translateY( -100% ) translateY( "+D.overlap+"px )";V="50% 0";
x="translateY( "+D.height+"px ) rotateX( -15deg )";n={top:"-"+(D.height-D.overlap)+"px"};O={top:"0px"};d={top:"0px"};B={top:D.height+"px"};break;case K:l="100% 50%";
j="rotateY( 30deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )";V="100% 50%";x="translateX( -"+D.width+"px ) rotateY( -15deg )";n={right:"-"+(D.width-D.overlap)+"px"};
O={right:"0px"};d={left:"0px"};B={left:"-"+D.width+"px"};break;case c:l="50% 100%";j="rotateX( -30deg ) translateY( 100% ) translateY( -"+D.overlap+"px )";
V="50% 100%";x="translateY( -"+D.height+"px ) rotateX( 15deg )";n={bottom:"-"+(D.height-D.overlap)+"px"};O={bottom:"0px"};d={top:"0px"};B={top:"-"+D.height+"px"};
break;default:l="100% 50%";j="translateX( -100% ) translateX( "+D.overlap+"px ) scale( 1.01 ) rotateY( -30deg )";V="0 50%";x="translateX( "+D.width+"px ) rotateY( 15deg )";
n={left:"-"+(D.width-D.overlap)+"px"};O={left:"0px"};d={left:"0px"};B={left:D.width+"px"};break;}}function g(){Meny.addClass(e.wrapper,"meny-"+D.position);
e.wrapper.style[Meny.prefix("perspective")]="800px";e.wrapper.style[Meny.prefix("perspectiveOrigin")]=V;}function v(){e.cover=document.createElement("div");
e.cover.style.position="absolute";e.cover.style.display="block";e.cover.style.width="100%";e.cover.style.height="100%";e.cover.style.left=0;e.cover.style.top=0;
e.cover.style.zIndex=1000;e.cover.style.visibility="hidden";e.cover.style.opacity=0;try{e.cover.style.background="rgba( 0, 0, 0, 0.4 )";e.cover.style.background="-ms-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
e.cover.style.background="-moz-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";e.cover.style.background="-webkit-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
}catch(W){}if(F){e.cover.style[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}e.contents.appendChild(e.cover);}function C(){var W=e.menu.style;
switch(D.position){case J:W.width="100%";W.height=D.height+"px";break;case K:W.right="0";W.width=D.width+"px";W.height="100%";break;case c:W.bottom="0";
W.width="100%";W.height=D.height+"px";break;case N:W.width=D.width+"px";W.height="100%";break;}W.position="fixed";W.display="block";W.zIndex=1;if(F){W[Meny.prefix("transform")]=j;
W[Meny.prefix("transformOrigin")]=l;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}else{Meny.extend(W,n);}}function Q(){var W=e.contents.style;
if(F){W[Meny.prefix("transform")]=S;W[Meny.prefix("transformOrigin")]=V;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;
}else{W.position=W.position.match(/relative|absolute|fixed/gi)?W.position:"relative";Meny.extend(W,d);}}function R(){if("ontouchstart" in window){Meny.bindEvent(document,"touchstart",L);
Meny.bindEvent(document,"touchend",H);}else{Meny.bindEvent(document,"mousedown",M);Meny.bindEvent(document,"mouseup",U);Meny.bindEvent(document,"mousemove",b);
}}function u(){if(!f){f=true;Meny.addClass(e.wrapper,"meny-active");e.cover.style.height=e.contents.scrollHeight+"px";e.cover.style.visibility="visible";
if(F){e.cover.style.opacity=1;e.contents.style[Meny.prefix("transform")]=x;e.menu.style[Meny.prefix("transform")]=G;}else{w&&w.stop();w=Meny.animate(e.menu,O,500);
y&&y.stop();y=Meny.animate(e.contents,B,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:1},500);}Meny.dispatchEvent(e.menu,"open");}}function I(){if(f){f=false;
Meny.removeClass(e.wrapper,"meny-active");if(F){e.cover.style.visibility="hidden";e.cover.style.opacity=0;e.contents.style[Meny.prefix("transform")]=S;
e.menu.style[Meny.prefix("transform")]=j;}else{w&&w.stop();w=Meny.animate(e.menu,n,500);y&&y.stop();y=Meny.animate(e.contents,d,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:0},500,function(){e.cover.style.visibility="hidden";
});}Meny.dispatchEvent(e.menu,"close");}}function M(W){m=true;}function b(Z){if(!m){var W=Z.clientX-A,aa=Z.clientY-z;switch(D.position){case J:if(aa>D.height){I();
}else{if(aa<D.threshold){u();}}break;case K:var X=e.wrapper.offsetWidth;if(W<X-D.width){I();}else{if(W>X-D.threshold){u();}}break;case c:var Y=e.wrapper.offsetHeight;
if(aa<Y-D.height){I();}else{if(aa>Y-D.threshold){u();}}break;case N:if(W>D.width){I();}else{if(W<D.threshold){u();}}break;}}}function U(W){m=false;}function L(W){t=W.touches[0].clientX-A;
r=W.touches[0].clientY-z;q=null;o=null;Meny.bindEvent(document,"touchmove",P);}function P(X){q=X.touches[0].clientX-A;o=X.touches[0].clientY-z;var W=null;
if(Math.abs(q-t)>Math.abs(o-r)){if(q<t-D.threshold){W=T;}else{if(q>t+D.threshold){W=p;}}}else{if(o<r-D.threshold){W=s;}else{if(o>r+D.threshold){W=h;}}}if(W&&W()){X.preventDefault();
}}function H(W){Meny.unbindEvent(document,"touchmove",P);if(q===null&&o===null){k();}}function k(){var W=(D.position===J&&r>D.height)||(D.position===K&&t<e.wrapper.offsetWidth-D.width)||(D.position===c&&r<e.wrapper.offsetHeight-D.height)||(D.position===N&&t<D.width);
if(W){I();}}function p(){if(D.position===K&&f){I();return true;}else{if(D.position===N&&!f){u();return true;}}}function T(){if(D.position===K&&!f){u();
return true;}else{if(D.position===N&&f){I();return true;}}}function h(){if(D.position===c&&f){I();return true;}else{if(D.position===J&&!f){u();return true;
}}}function s(){if(D.position===c&&!f){u();return true;}else{if(D.position===J&&f){I();return true;}}}return{open:u,close:I,isOpen:function(){return f;
},addEventListener:function(W,X){e.menu&&Meny.bindEvent(e.menu,W,X);},removeEventListener:function(W,X){e.menu&&Meny.unbindEvent(e.menu,W,X);}};})();},animate:function(b,a,c,d){return(function(){var g={};
for(var j in a){g[j]={start:parseFloat(b.style[j])||0,end:parseFloat(a[j]),unit:(typeof a[j]==="string"&&a[j].match(/px|em|%/gi))?a[j].match(/px|em|%/gi)[0]:""};
}var i=Date.now(),e;function h(){var k=1-Math.pow(1-((Date.now()-i)/c),5);for(var m in g){var l=g[m];b.style[m]=l.start+((l.end-l.start)*k)+l.unit;}if(k<1){e=setTimeout(h,1000/60);
}else{d&&d();f();}}function f(){clearTimeout(e);}h();return{stop:f};})();},extend:function(d,c){for(var e in c){d[e]=c[e];}},prefix:function(e,d){var b=e.slice(0,1).toUpperCase()+e.slice(1),g=["Webkit","Moz","O","ms"];
for(var c=0,a=g.length;c<a;c++){var f=g[c];if(typeof(d||document.body).style[f+b]!=="undefined"){return f+b;}}return e;},addClass:function(b,a){b.className=b.className.replace(/s+$/gi,"")+" "+a;
},removeClass:function(b,a){b.className=b.className.replace(a,"");},bindEvent:function(a,c,b){if(a.addEventListener){a.addEventListener(c,b,false);}else{a.attachEvent("on"+c,b);
}},unbindEvent:function(a,c,b){if(a.removeEventListener){a.removeEventListener(c,b,false);}else{a.detachEvent("on"+c,b);}},dispatchEvent:function(b,c,a){if(b){var d=document.createEvent("HTMLEvents",1,2);
d.initEvent(c,true,true);Meny.extend(d,a);b.dispatchEvent(d);}},getQuery:function(){var a={};location.search.replace(/[A-Z0-9]+?=([w|:|/.]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop();
});return a;}};if(typeof Date.now!=="function"){Date.now=function(){return new Date().getTime();};}

var meny = Meny.create({
menuElement: document.querySelector( '.meny' ),
contentsElement: document.querySelector( '.contents' ),
position: Meny.getQuery().p || 'left',
height: 200,
width: 260,
threshold: 40
});
if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contents = document.querySelector( '.contents' );
contents.style.padding = '0px';
contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
}
//]]>
</script>
Con esto ya hemos finalizado la instalación de este genial menú.
Categorías: Trucos Blogger

10 comentarios

ALBA · febrero 27, 2013 a las 2:53 pm

Que buena la información!

David Vaz Guijarro · marzo 10, 2013 a las 4:09 pm

Me encanta, muchas gracias!!

cosasdericos · marzo 10, 2013 a las 7:04 pm

excelente me has ayudado mucho.

Campeon Drake · junio 18, 2013 a las 5:00 pm

Excelente muchas gracias por compartirlo, pero tengo un problema.
El menú funciona perfectamente, pero ahora no puedo ver los Fanboxs desplegables de Facebook, Google+ y twitter del costado derecho.
¿Me puedes ayudar por favor?, me gustaría tener los dos códigos, pero parece ser que solo puedo tener uno al tiempo.
Gracias

    Hayder Juvinao · junio 27, 2013 a las 8:19 pm

    Campeon es problema de incompatibilidad, te recomiendo que uses solo uno de los dos trucos.

    Saludos

Anonymous · septiembre 6, 2013 a las 8:04 am

Mi apreciado Hayder Juvinao, realmente avanzas a pasos gigantescos yo soy tu amigo Colombiano que te escribió ayer y hoy me le quito el sombrero. MUCHAS GRACIAS y mis sinceras felicitaciones, se que muchos ni siquiera agradecen pero contigo la cosa es seria.

Dios te bendiga grandemente.

Jorge OASIS

    Hayder Juvinao · septiembre 7, 2013 a las 10:39 pm

    Amigo gracias por tu comentario, he visitado tu blog y me he sorprendido gratamente cuanto has avanzado.

    Saludos hermano colombiano 😉

Asier Ruiz · noviembre 29, 2013 a las 12:02 am

Hola. ¿Se podría utilizar meny para mostra/ocultar una barra lateral con gadgets situada a la derecha? Gracias de antemano.

Ot@kus · febrero 13, 2014 a las 3:57 pm

disculpa me parece erros y me dice lo siguente Error al analizar XML, línea 2047, columna 3: The element type «b:section» must be terminated by the matching end-tag «».
¿que hago?

Responder a Hayder Juvinao Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *