Premessa: il menu è stato realizzato dalla sottoscritta pertanto è gradito l'inserimento dei credits proposti. Giusto giusto perchè ho fatto la base che voi modificherete per adattarla alle vostre esigenze 
.
Il codice è molto intuitivo per chi conosce un minimo di CSS/HTML, ma se avete problemi potete contattarmi tramite la sezione "Supporto" aprendo un topic.
In Amministrazione > Grafica > Colori e Stili:
In Amministrazione > Grafica > Gestione HTML (dove volete il menu, alto, basso, home etc...):
Al posto di # dovete aggiungere URL della voce.
La parte in Colori e Stili serve per personalizzare il menu e come detto il codice è molto intuitivo:
Al codice potete aggiungere altri particolari come text-shadow, box-shadow, border etc. e ovviamente aggiungere/togliere voci, modificare dimensioni, font (al momento prende quello dei link della skin) e i colori
.
Edited by -spiker - 25/8/2013, 16:15
.CODICE
Menu a Cerchio by <a href="http://evs.blogfree.net/?act=Profile&MID=24527">-spiker</a>
Il codice è molto intuitivo per chi conosce un minimo di CSS/HTML, ma se avete problemi potete contattarmi tramite la sezione "Supporto" aprendo un topic.
In Amministrazione > Grafica > Colori e Stili:
CODICE
/* MENU A CERCHI ORIZZANTILI BY -spiker */
.circlevs {display: inline-block;
width: 65px;
height: 65px;
text-align: center;
margin: 4px;
border-radius: 50px;
line-height: 60px;
padding: 2px;
background: #FF4B4B;
color: #FFF}
.circlevs:hover {background: #1DB9C4;
transition-duration: .99s;
-webkit-transition-duration:.99s;
-moz-transition-duration: .99s;
-o-transition-duration: .99s;
transform: scale(1.5) rotate(360deg);
-moz-transform: scale(1.5) rotate(360deg);
-webkit-transform: scale(1.5) rotate(360deg);
-o-transform: scale(1.5) rotate(360deg)}
.circlevs {display: inline-block;
width: 65px;
height: 65px;
text-align: center;
margin: 4px;
border-radius: 50px;
line-height: 60px;
padding: 2px;
background: #FF4B4B;
color: #FFF}
.circlevs:hover {background: #1DB9C4;
transition-duration: .99s;
-webkit-transition-duration:.99s;
-moz-transition-duration: .99s;
-o-transition-duration: .99s;
transform: scale(1.5) rotate(360deg);
-moz-transform: scale(1.5) rotate(360deg);
-webkit-transform: scale(1.5) rotate(360deg);
-o-transform: scale(1.5) rotate(360deg)}
In Amministrazione > Grafica > Gestione HTML (dove volete il menu, alto, basso, home etc...):
CODICE
<a href="#" class="circlevs">Voce #1</a>
<a href="#" class="circlevs">Voce #2</a>
<a href="#" class="circlevs">Voce #3</a>
<a href="#" class="circlevs">Voce #4</a>
<a href="#" class="circlevs">Voce #5</a>
<a href="#" class="circlevs">Voce #2</a>
<a href="#" class="circlevs">Voce #3</a>
<a href="#" class="circlevs">Voce #4</a>
<a href="#" class="circlevs">Voce #5</a>
Al posto di # dovete aggiungere URL della voce.
La parte in Colori e Stili serve per personalizzare il menu e come detto il codice è molto intuitivo:
SPOILER (clicca per visualizzare)
- display serve per allineare i cerchi orizzontalmente;
- width: larghezza del cerchio;
- height: altezza del cerchio;
- text-align: allinea il testo centralmente;
- margin: distanzia dei cerchi esternamente;
- padding: distanzia le scritte centrali dai bordi;
- border-radius: arrotonda i bordi;
- line-height: allinea verticalmente il testo;
- background: colore di sfondo;
- color: colore della scritta;
- transition-duration: il tempo della transizione;
- transform: rotazione ed effetto scala;
- width: larghezza del cerchio;
- height: altezza del cerchio;
- text-align: allinea il testo centralmente;
- margin: distanzia dei cerchi esternamente;
- padding: distanzia le scritte centrali dai bordi;
- border-radius: arrotonda i bordi;
- line-height: allinea verticalmente il testo;
- background: colore di sfondo;
- color: colore della scritta;
- transition-duration: il tempo della transizione;
- transform: rotazione ed effetto scala;
Al codice potete aggiungere altri particolari come text-shadow, box-shadow, border etc. e ovviamente aggiungere/togliere voci, modificare dimensioni, font (al momento prende quello dei link della skin) e i colori
.Edited by -spiker - 25/8/2013, 16:15
.