Menù quadrato con effetti di transizione CSS3.

Un menù quadrato con effetti di transizione per Blogger e altre piattaforme.

Il nuovo linguaggio CSS3 permette ai programmatori di realizzare degli effetti grafici animati e molto suggestivi senza utilizzare javascript o oggetti in flash. Questa tecnologia non è stata ancora completamente implementata in Internet Explorer e questo è un po' il suo limite visto che molti utenti ancora si ostinano a usare questo browser.

Vado a presentarvi un menù che forse molti di voi lo considereranno solo una mera curiosità ma che potrebbe essere interessante inserire in un elemento pagina del blog per rimandare a 4 pagine particolarmente importanti del sito. Non ho testato perché in questo momento sono oberato da impegni ma penso che al posto dei link di testo si possano inserire anche delle immagini quadrate 100x100 pixel ciascuna di esse collegata a un determinato articolo. Ecco come è il menù in condizioni normali e come diventa il menù quando si punta con il mouse

Ho anche postato una dimostrazione online

Il codice va incollato su Layout > Aggiungi un gadget > HTML/Javascript ed è il seguente

<style>
.menuquadrato {
width: 100px;
margin:auto;
}
.menuquadrato:hover {}
.menuquadrato ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.menuquadrato ul a {
color: white;
}
.menuquadrato ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.menuquadrato ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;
}
.menuquadrato ul li a:hover {
background: rgba(230,150,20,0.7);
}
.menuquadrato ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.menuquadrato:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.menuquadrato ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.menuquadrato ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.menuquadrato ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.menuquadrato ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}
</style>
<div class="menuquadrato"><ul><li class="main"><a href="#">Home</a></li>
<li class="top"><a href="#">Alto</a></li>
<li class="right"><a href="#">Destra</a></li>
<li class="bottom"><a href="#">Basso</a></li>
<li class="left"><a href="#">Sinistra</a></li>
</ul></div>

Al posto dei cancelletti di colore viola si incollano gli URL dei post collegati. Si possono anche modificare i colori, le dimensioni e la durata della transizione (0.3 secondi). Per menù più tradizionali vi invito a leggere il post

• I migliori menù di Blogger -