.menuwrap > .left > li:first-child > a > .avatar {line-height: normal;
overflow: hidden;
width: 26px;
height: 26px;
position: absolute;
top: 6px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
border: 2px solid rgba(0, 0, 0, .2);
z-index: 9}
.menuwrap > .left > li:first-child:hover > a > .avatar {top: 103px;
width: 100px;
height: 100px}
.menuwrap > ul > li:first-child > ul {z-index: 1;
padding-left: 120px}
.menuwrap .nick {margin-left: 3.6em !important}
-
DarkWolf
.User deleted
Effetto "Avatar Drop Down" Menù Utente
Presentazione - Codice completo - Spiegazione del codice - CreditsIl tanto atteso codice per l'ingrandimento dell'avatar nel menu utente è finalmente stato reso pubblico!
Di seguito la breve guida per poter avere sul proprio forum questo script senza tanti rompicapo e problemi vari...
Il codice è preimpostato per funzionare al meglio, ma si può comunque arricchire con ombre, background, border-radius e tanto altro!
Le classi sono così lunghe per paura degli innumerevoli filtri di ForumFree
La prima classe (.menuwrap > .left > li:first-child > a > .avatar) riguarda quello che c'è "dietro" l'avatar, ovvero la parte che contiene la vera e propria immagine dell'avatar.
Modificando width e height modificherete larghezza e altezza del contenitore e di conseguenza dell'immagine
Modificando top sposterete il contenitore più in basso o più in alto, si possono usare numeri relativi cioè si possono scrivere anche valori negative es: -5px
Modificando -webkit-transition, -o-transition e -moz-transition alla parte 1s modificherete la velocità della transizione, per diminuirla scrivere 0.Xs sostituendo la X con un numero da 1 a 9, per aumentarla scrivere Xpx sostituendo la X con un numero da 1 a 9. Il risultato però sarà un'attesa di 3/4/5 secondi quindi conviene solo diminuirla.
Modificando border modificherete il bordo del contenitore, per saperne di più sulla proprietà border seguire questa guida
La seconda classe (.menuwrap > .left > li:first-child:hover > a > .avatar) riguarda il contenitore in stato di :hover, in parole povere quando l'avatar è grande...
Modificando top sposterete il contenitore più in basso o più in alto, si possono usare numeri relativi cioè si possono scrivere anche valori negative es: -5px
Modificando width e height modificherete larghezza e altezza del contenitore e di conseguenza dell'immagine
La terza classe (.menuwrap > ul > li:first-child > ul) riguarda il primo "pannello", per intenderci quello che appare quando si passa con il puntatore sul nick.
Modificando padding-left andrete a modificare lo spazio presente dal margine e lascerete il posto per l'avatar, ricordo che all'avatar è assegnata un position: absolute quindi dovete considerare nello spazio che lasciate da sinistra la larghezza dell'avatar impostata precedentemente
La quarta e ultima classe (.menuwrap .nick) riguarda la distanza del nick dal margine.
Modificando margin-left modificherete la distanza dal margine del menu, si possono usare anche i pixel (px) ma consiglio di lasciare 3.6em
NB: non modificate !important
I credits per l'utilizzo di questo codice sono obbligatori, li potete inserire in un punto qualsiasi del forum, anche in fondo, basta che siano visibili.
Potete scegliere un banner tra questiHTML<a href="http://ffmagazine.forumfree.net"><img src="http://digilander.libero.it/sywork/yolia/mentadent/ffm.png" alt="ForumFree Magazine"></a>
<a href="http://ffmagazine.forumfree.net"><img src="http://digilander.libero.it/sywork/yolia/mentadent/ffm2.png" alt="ForumFree Magazine"></a>
<a href="http://ffmagazine.forumfree.net"><img src="http://digilander.libero.it/sywork/yolia/mentadent/ffm3.png" alt="ForumFree Magazine"></a>
<a href="http://ffmagazine.forumfree.net"><img src="http://digilander.libero.it/sywork/yolia/mentadent/ffm4.png" alt="ForumFree Magazine"></a>
<a href="http://ffmagazine.forumfree.net"><img src="http://digilander.libero.it/sywork/yolia/mentadent/ffm5.png" alt="ForumFree Magazine"></a>
es:SPOILER (clicca per visualizzare)
CREDITI: bored
.
