Meny è un menu tridimensionale molto particolare e sorprendente, non solo per il modo in cui visualizza i link, ma anche per il modo in cui "dispone" il blog. Ciò che fa questo menu è che quando ci si passa sopra con il mouse, il contenuto del menu scorre fuori, mentre il blog viene capovolto con un effetto 3D.
Il modo migliore per capirlo è guardare la demo su questo blog di prova : basta passare il mouse sulla freccia per vedere questo menu in azione.
Lo script è di Hakim El Hattab e, fortunatamente per molti, non utilizza jQuery o Scriptaculous, quindi nella maggior parte dei casi non dovrebbero esserci problemi di compatibilità.
L'implementazione di questo menu di sfogliatura delle pagine 3D è piuttosto semplice, basta andare su Modello | Modifica HTML e prima ]]></b:skin> incolla gli stili:
/* Menù MenùQuindi cerca il tag <body> o questa riga:
----------------------------------------------- */
.meny {
display: none;
imbottitura: 20px;
traboccamento: automatico;
sfondo: #333;
colore: #eee; /* Colore di sfondo del menu */
-webkit-box-sizing: border-box;
-moz-box-sizing: casella di confine;
box-sizing: bordo-scatola;
}
.meny h4 {
dimensione carattere: 24px; /* Dimensione titolo menu */
colore:#fff; /* Colore del titolo del menu */
text-align:center;
}
.meny ul {
margine superiore: 10px;
}
.meny ul li {
display: inline-block;
larghezza: 200px;
stile elenco: nessuno;
dimensione carattere: 20px;
imbottitura: 3px 10px;
}
.meny-arrow {
posizione: assoluta;
indice z: 10;
bordo: 10px solido trasparente;
-webkit-transition: opacità 0,4s facilità 0,4s;
-moz-transition: opacità 0,4s facilità 0,4s;
-ms-transition: opacità 0,4s facilità 0,4s;
-o-transizione: opacità 0,4s facilità 0,4s;
transizione: opacità 0,4s facilità 0,4s;
}
.meny-left .meny-arrow {
sinistra: 5px;
in alto: 350px;
margine superiore: -16px;
bordo sinistro: 16px solido #333; /* Colore freccia */
}
.meny-right .meny-arrow {
destra: 14px;
in alto: 150px;
margine superiore: -16px;
bordo destro: 16px solido #333; /* Colore freccia */
}
.meny-top .meny-arrow {
sinistra: 150px;
in alto: 14px;
margine sinistro: -16px;
bordo superiore: 16px solido #333; /* Colore freccia */
}
.meny-bottom .meny-arrow {
left: 150px;
in basso: 14px;
margine sinistro: -16px;
bordo inferiore: 16px solido #333;/* Colore freccia */
}
.meny-active .meny-arrow {
opacità: 0;
-webkit-transition: opacità 0,2s facilità;
-moz-transition: opacità 0,2s facilità;
-ms-transition: opacità 0,2s facilità;
-o-transizione: opacità 0,2s facilità;
transizione: opacità 0,2s facilità;
}
.contenuto {
larghezza: 100%;
altezza: 100%;
overflow-y: automatico;
-webkit-overflow-scrolling: tocco;
-webkit-box-sizing: casella di confine;
-moz-box-sizing: casella di confine;
box-sizing: bordo-scatola;
}
<body expr:class='"caricamento" + dati:blog.mobileClass'>Sotto uno dei due aggiungere quanto segue:
<div class='meny'>Infine, aggiungi questo codice prima di </body> :
<h4>Menu</h4>
<ul>
<li> <a href=' Link URL '> Testo del collegamento </a></li>
<li> <a href=' Link URL '> Testo del collegamento </a></li>
<li> <a href=' Link URL '> Testo del collegamento </a> </li> <li> <a href=' Link URL '>
Testo del collegamento </a> </li> <li> <a href=' Link URL '> Testo del collegamento </a> </li> <li> <a href=' Link URL '> Testo del collegamento </a> </li> <li> <a href=' Link URL '> Testo del collegamento </a> </li> <li> <a href=' Link URL '> Testo del collegamento </a></li> </ul> </div> <div class='meny-arrow'/> <div class='contents'>
</div>
<script>
//<![CDATA[
/*!
* meny 1.2
* http://lab.hakim.se/meny
* Con licenza MIT
* Creato da Hakim El Hattab (http://hakim.se, @hakimel)
*/
var Meny={create:function(a){return(function(){if(!a||!a.menuElement||!a.contentsElement){throw"È necessario specificare quali elementi del menu e dei contenuti utilizzare.";
}if(a.menuElement.parentNode!==a.contentsElement.parentNode){throw"Gli elementi del menu e dei contenuti devono avere lo stesso genitore.";}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={larghezza:300,altezza:300,posizione:N,soglia:40,sovrapposizione: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();funzione i(){G="";S="";switch(D.posizione){caso J:l="50% 0%";j="ruotaX( 30 gradi ) traduciY( -100% ) traduciY( "+D.sovrapposizione+"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={destra:"0px"};d={sinistra:"0px"};B={sinistra:"-"+D.larghezza+"px"};break;case c:l="50% 100%";j="rotateX( -30deg ) translateY( 100% ) translateY( -"+D.sovrapposizione+"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="assoluto";e.cover.style.display="blocco";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="nascosto";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[Menu.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;
se(F){W[Meny.prefix("trasforma")]=S;W[Meny.prefix("originetrasforma")]=V;W[Meny.prefix("transizione")]="tutto "+D.duratatransizione+" "+D.facilitazionetransizione;
}else{W.position=W.position.match(/relative|assoluto|fisso/gi)?W.position:"relative";Meny.extend(W,d);}}function R(){if("ontouchstart" nella finestra){Meny.bindEvent(documento,"touchstart",L);
Meny.bindEvent(documento,"touchend",H);}else{Meny.bindEvent(documento,"mousedown",M);Meny.bindEvent(documento,"mouseup",U);Meny.bindEvent(documento,"mousemove",b);
}}funzione u(){if(!f){f=true;Meny.addClass(e.wrapper,"meny-active");e.cover.style.height=e.contents.scrollHeight+"px";e.cover.style.visibility="visibile";
se(F){e.cover.style.opacity=1;e.contents.style[Meny.prefix("trasforma")]=x;e.menu.style[Meny.prefix("trasforma")]=G;}altrimenti{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="nascosto";e.cover.style.opacity=0;e.contents.style[Meny.prefix("trasforma")]=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();
} altrimenti{se(aa<D.soglia){u();}}interruzione;case K:var X=e.wrapper.offsetWidth;se(W<XD.larghezza){I();} altrimenti{se(W>XD.soglia){u();}}interruzione;case c:var Y=e.wrapper.offsetHeight;
se(aa<YD.altezza){I();}altrimenti{se(aa>YD.soglia){u();}}interruzione;caso N:se(W>D.larghezza){I();}altrimenti{se(W<D.soglia){u();}}interruzione;}}}funzione U(W){m=false;}funzione L(W){t=W.tocca[0].clientX-A;
r=W.touches[0].clientY-z;q=null;o=null;Meny.bindEvent(documento,"touchmove",P);}funzione P(X){q=X.touches[0].clientX-A;o=X.touches[0].clientY-z;var W=null;
se(Math.abs(qt)>Math.abs(or)){se(q<tD.soglia){W=T;}altrimenti{se(q>t+D.soglia){W=p;}}altrimenti{se(o<rD.soglia){W=s;}altrimenti{se(o>r+D.soglia){W=h;}}}se(W&&W()){X.preventDefault();
}}funzione H(W){Meny.unbindEvent(documento,"touchmove",P);if(q===null&&o===null){k();}}funzione k(){var W=(D.posizione===J&&r>D.altezza)||(D.posizione===K&&t<e.wrapper.offsetWidth-D.larghezza)||(D.posizione===c&&r<e.wrapper.offsetHeight-D.altezza)||(D.posizione===N&&t<D.larghezza);
if(W){I();}}funzione p(){if(D.position===K&&f){I();restituisci vero;}else{if(D.position===N&&!f){u();restituisci vero;}}}funzione T(){if(D.position===K&&!f){u();
restituisce vero;}altrimenti{se(D.posizione===N&&f){I();restituisce vero;}}}funzione h(){se(D.posizione===c&&f){I();restituisce vero;}altrimenti{se(D.posizione===J&&!f){u();restituisce vero;
}}}funzione s(){if(D.position===c&&!f){u();restituisci vero;}else{if(D.position===J&&f){I();restituisci vero;}}}restituisci{open:u,close:I,isOpen:funzione(){restituisci 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 ',
altezza: 200,
larghezza: 260,
soglia: 40
});
se( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contenuti = document.querySelector( '.contents' );
contenuti.stile.padding = '0px';
contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="larghezza: 100%; altezza: 100%; bordo: 0; posizione: assoluta;"></iframe>';
}
//]]>
</script>
Modificare gli URL e i nomi dei link dove indicato in rosso. Quindi salva le modifiche e il gioco è fatto.
Se desideri aggiungere altri link, aggiungi semplicemente una riga come questa prima di </ul> per ogni link extra che desideri:
<li> <a href='URL collegamento'> Testo collegamento </a></li>
Inoltre, è possibile modificare l'orientamento della pagina quando la si capovolge; può essere lasciato così com'è di default, a destra, in alto o in basso. Questo viene modificato dove dice left nell'ultimo codice e puoi cambiarlo in right , top o bottom
Se hai molti contenuti in orizzontale, l'aspetto sarà migliore se li sposti in alto o in basso , anche se ciò cambierà anche l'orientamento del menu.
Commenti
Posta un commento