Menu a Rombo #1

Menu a Rombo #1

Tags
Menu Pronto
Resource
By -spiker il 25 Aug. 2013

+3 3 Comments 110 Views
.

Esempio
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 .
CODICE
Menu a Rombo 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:
SPOILER (clicca per visualizzare)
CODICE
/* MENU ROMBO BY -spiker */
.evs {width: 70px; height: 70px;
background: #FF4B4B;
display: inline-block;
margin: 15px;
transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transition-duration: .3s; -webkit-transition-duration:.3s; -moz-transition-duration: .3s; -o-transition-duration: .3s}
.evs:hover {background: #1DB9C4}
.evs_text, .evs_text a {height: 70px;
color: #FFF;
padding: 3px;
line-height: 60px;
text-decoration: none;
transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg)}
.evs_text:hover, .evs_text a:hover, .evs:hover a {color: #FFF}
.evs:hover, .evs_text:hover {transform: rotate(0deg); transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transition-duration: .3s; -webkit-transition-duration:.3s; -moz-transition-duration: .3s; -o-transition-duration: .3s}

/* MENU ROMBO - VOCE PERSONALIZZATA BY -spiker */
.evs_1 {width: 70px; height: 70px;
background: #1DB9C4;
display: inline-block;
margin: 15px;
transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transition-duration: .3s; -webkit-transition-duration:.3s; -moz-transition-duration: .3s; -o-transition-duration: .3s}
.evs_1:hover {background: #FF4B4B;
transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transition-duration: .3s; -webkit-transition-duration:.3s; -moz-transition-duration: .3s; -o-transition-duration: .3s}
.evs1_text, .evs1_text a {height: 70px;
color: #FFF;
padding: 3px;
line-height: 60px;
text-decoration: none;
transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg)}
.evs1_text:hover, .evs1_text a:hover, .evs_1:hover a {color: #FFF}
.evs1_text:hover {transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg)}

In Amministrazione > Grafica > Gestione HTML (dove volete il menu, alto, basso, home etc...):
CODICE
<div class="evs"><div class="evs_text"> <a href="#">Voce #1</a></div></div> <br>
<div class="evs"><div class="evs_text"> <a href="#">Voce #2</a></div></div>
<div class="evs"><div class="evs_text"> <a href="#">Voce #3</a></div></div>
<div class="evs"><div class="evs_text"> <a href="#">Voce #4</a></div></div> <br>
<div class="evs"><div class="evs_text"> <a href="#">Voce #5</a></div></div>

Al posto di # dovete aggiungere URL della voce.
Per avere una voce (o più) personalizzata usare:
CODICE
<div class="evs_1"><div class="evs1_text"> <a href="#">Voce #X</a></div></div>

La parte in Colori e Stili serve per personalizzare il menu e il codice è molto intuitivo.

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 .

Share

.