-
Valls ~+5
.User deleted
Il menù veloce, sempre utilissimo per la navigazione, è un elemento quasi indispensabile in un forum ben organizzato. Vi insegneremo ora alcuni brevi passaggi per crearne uno a vostro piacimento.
1) Lo scheletro. Prima di tutto vediamo come ordinare le varie voci del menù.
Creiamo un elenco ordinato e numeriamo ciascuna voce in modo diverso per lavorarci meglio e, visto che ci siamo, iniziamo a mettere un link nella prima voce:CODICE<ul>
<li><a href="link1">Voce 1</a></li>
<li>Voce 2</li>
<li>Voce 3</li>
<li>Voce 4</li>
</ul>
Il risultato è un normale elenco, piuttosto spoglio. Per personalizzare il menù è necessario lavorare sul css.
Prendiamo lo scheletro di prima e diamo il nome alla classe corrispondente al nostro UL.CODICE<ul class="valls_tutorial">
<li><a href="link1">Voce 1</a></li>
<li>Voce 2</li>
<li>Voce 3</li>
<li>Voce 4</li>
</ul>
Ovviamente potete scegliere il nome della classe che preferite, basta cambiare "valls_tutorial".
Adesso possiamo scegliere se continuare a lavorare su HTML in cima al forum, nella homepage, o nelle pagine personalizzate, o modificare il css direttamente da Colori e stili.
Consiglio di lavorare su colori e stili, cosicchè al prossimo cambio di grafica sia sufficiente mantenere le stesse classi per modificare il menù direttamente con la skin.
Aggiungiamo questo stringa per modificare le singole voci del menù:CODICEul.valls_tutorial li {ATTRIBUTI}
Finalmente, possiamo iniziare a personalizzare il nostro menù.
2) Posizionamento. Vediamo ora come posizionare il menù.
Possiamo scegliere se posizionare le voci in orizzontale o in verticale.
Per il posizionamento in verticale non serve far nulla perchè le voci già di per sè si allineano in quest'ordine. Tuttavia, rimangono quei fastidiosi pallini.
Modifichiamo il codice precedente in questa maniera:CODICEul.valls_tutorial li {list-style-type: none}
Se, invece, vogliamo posizionare il menù in orizzontale, ci basta aggiungere il codice qui sotto e i pallini spariranno da soli:CODICEul.valls_tutorial li {display: inline-block}
3) Forme. Possiamo dare alle voci del menù tante forme diverse, come pallini, rettangoli, quadrati ecc.
Per modificare la forma delle voci utilizziamo la proprietà border-radius.
Prima di tutto diamo un colore di sfondo al menù (che ovviamente può essere anche un'immagine) e con la proprietà margin separiamo le voci tra loro. Ora diamo una dimensione al nostro menù con la proprietà width.
Se vogliamo che il menù abbia delle semplici voci rettangolari, non dobbiamo modificare nulla se non aggiungere un po' di padding (quest'ultimo consigliato in ogni caso).
Se vogliamo dei rettangoli con angoli un po' smussati, possiamo fare così:CODICEul.valls_tutorial li {background: #ccc; padding: 3px; margin-right: 2px; border-radius: 5px; text-align: center}
ESEMPIO PRATICO:- Voce 1
Per ottenere un risultato migliore, io ho centrato il testo. Non è necessario farlo.
Se vogliamo che due soli angoli siano arrotondati, allora procediamo così:CODICEul.valls_tutorial li {border-radius: 5px 0 5px 0}
ESEMPIO PRATICO:- Voce 1
La prima cifra si riferisce al bordo in alto a sinistra, la seconda a quello in alto a destra e così via, in senso orario.
Possiamo giocare con il border radius e il padding fino a ottenere i risultati che vogliamo.- Voce 1
In questo caso ho dato valori molto alti sia al padding sia al border-radius per ottenere un cerchio, poi ho modificato width e height in modo che fossero uguali e infine ho regolato l'altezza del testo con line-height.
Questo è il codice che ho usato:CODICEul.valls_tutorial li {padding: 14px; width: 50px; height: 50px; border-radius: 50px; text-align: center; line-height: 380%}
4) Il testo. Vediamo ora come modificare il testo del menù.
Abbiamo già anticipato che è possibile centrarle il testo e se siete stati attenti (lol) avrete notato anche il codice che abbiamo utilizzato per farlo:CODICEul.valls_tutorial li {text-align: center}
Il testo può essere centrato a sinistra (text-align: left, anche se non è necessario specificarlo di norma dato che è il valore di default), a destra (text-align: right) o al centro come abbiamo fatto prima.
Per cambiare il colore, lo stile, lo spessore del testo, utilizziamo i soliti attributi. Ricordiamo i principali.
COLORE - ul.valls_tutorial li {color: #HEX} Possiamo modificare HEX con un colore in esadecimale.
SPESSORE - ul.valls_tutorial li {font-weight: XXX} Modifichiamo XXX con bold, normal o lighter.
CORSIVO - ul.valls_tutorial li {font-style: XXX} Modifichiamo XXX con normal, italic o oblique.
OMBRA - ul.valls_tutorial li {text-shadow: 1px 2px 3px #HEX} Modifichiamo 1, 2, 3 con il valore in px rispettivamente dello spostamento in orizzontale, in verticale e della durezza dell'ombra e HEX con il colore in esadecimale.
Possiamo utilizzare l'ombra anche per creare un effetto "neon":CODICEul.valls_tutorial li {text-shadow: 0 0 3px}- Voce 1
5) Al passaggio del mouse. Ci piacerebbe che il nostro menù avesse degli effetti carini al passaggio del mouse. Non c'è una vera e propria guida per tutti gli effetti possibili perchè sono sconfinati, perciò vedremo le regole di base che potrete poi elaborare e mescolare per creare il vostro unico e irripetibile effetto.
Ci dobbiamo affidare alla pseudoclasse :hover, in questo modo:CODICEul.valls_tutorial li:hover {}
Non c'è bisogno di re-inserire tutti gli attributi di ul.valls_tutorial li, basterà aggiungere ciò che volete che cambi al passaggio del mouse.
Prendiamo come esempio un menù simile al precedente:- Voce 1
Vogliamo che la scritta al passaggio del mouse diventi verde. Facciamo allora così:CODICEul.valls_tutorial li:hover {color: #63B140}
Il vostro menù, al passaggio del mouse apparirà così:- Voce 1
Tra gli effetti più comuni ricordiamone alcuni:
OPACITA' - ul.valls_tutorial li:hover {opacity: XXX} Modifichiamo XXX con un numero da 1 a 0, ad esempio 0.5.
ROTAZIONE - ul.valls_tutorial li:hover {transform: rotate(XXXdeg)} Modifichiamo XXX con il numero dei gradi a cui vogliamo ruotare l'elemento, ad esempio 180deg.
SCALA - ul.valls_tutorial li:hover {transform: scale(XXX)} Modifichiamo XXX con un numero più piccolo o più grande di 1.0 per cambiare la scala degli elementi. Ad esempio, se scriviamo transform:scale(0.5), l'elemento sarà la metà, se scriviamo transform:scale(2), l'elemento sarà il doppio.
Un effetto molto comodo è la transizione. Essa ci permette di passare gradualmente da una "situazione" a un'altra. Ad esempio, prendendo il caso analizzato precedentemente, se voglio cambiare colore alla scritta da arancione a verde, con la transizione essa passerà gradatamente dall'arancione iniziale al verde finale.CODICEul.valls_tutorial li {transition: color .1s linear}
Al posto di color possiamo mettere "all" se vogliamo che cambino gradatamente tutti gli attributi che differenziano ul.valls_tutorial li da ul.valls_tutorial li:hover. Altrimenti, come nel mio caso, possiamo specificare solo ciò che vogliamo far cambiare con transizione.
Al posto di .1s possiamo specificare il tempo della transizione. In questo caso, essa durerà un secondo. Possiamo farla durare anche mezzo secondo: ".0.5s" o due minuti: ".2s".
Al posto di linear possiamo metter diversi tipi di transizione: ease, ease in, ease out, ease-in-out.
5) Bonus. Ora che abbiamo tutte le basi siamo capaci di creare i nostri menù, basta solo un po' di fantasia! Ad esempio, possiamo fare dei cerchi che si trasformano in quadrati.
Vi ho preparato alcuni esempi di menù già pronti con vari effetti per farveli vedere "all'opera" nel mio forum di prova (click).
Prendiamo in esame l'esempio 1. Ho utilizzato tutte tecniche che abbiamo già appreso: come fare un menù orizzontale, cambiare lo sfondo e le scritte, come fare un cerchio, come usare l'effetto rotazione e come usare la transizione. E questo è il codice:CODICEul.menu_tutorial li {display: inline-block; background: #FF4B4B; color: #fff; padding: 4px; width: 42px; height: 42px; border-radius:40px; line-height: 345%; font-family: trebuchet ms; transition: all .3s ease-in-out}
ul.menu_tutorial li:hover {background: #1DB9C4; border-radius: 0; transform: rotate(360deg)}
Semplice, no?
E ora, un ultimo trucchetto! Possiamo modificare una a una le voci del nostro menù. Prendiamo l'esempio 2.
Come vedete, le voci sono diverse a due a due. Possiamo fare in modo che siano diverse a tre a tre, o a quattro a quattro.CODICEul.valls_tutorial li:nth-child(3n) {background: #000000}
Prendiamo questo codice ad esempio. In questo modo la terza voce del menù e tutti i multipli di tre avranno lo sfondo nero (#000000) perchè nel codice abbiamo specificato: (3n). Quindi, se mettiamo (2n) tutte le voci pari saranno uguali e diverse da quelle dispari.
Se il nostro menù ha in totale quattro voci, e noi vogliamo farle tutte diverse, possiamo modificarle una ad una in questo modo:CODICEul.valls_tutorial li {background: #000000}
ul.valls_tutorial li:nth-child(2n) {background: #AAAAAA}
ul.valls_tutorial li:nth-child(3n) {background: #FFFFFF}
ul.valls_tutorial li:nth-child(4n) {background: #666666}
In questo modo le quattro voci saranno tutte diverse. Questo trucco è molto utile se si vogliono creare menù le cui voci costituiscono un gradiente o se si vuole ottenere un effetto "arcobaleno".
Per farvi un esempio pratico di codice completo, ecco come risulta il codice del mio menù ESEMPIO 2.CODICEul.menu_tutorial2 li, ul.menu_tutorial2 li:nth-child(2n):hover {display: inline-block; background: #EF9834; color: #FFF; padding: 3px; border-radius: 7px 0 7px 0; font-family: verdana; transition: border-radius .3s ease-in-out}
ul.menu_tutorial2 li:hover, ul.menu_tutorial2 li:nth-child(2n) {background: #81CC2C; border-radius: 0 7px 0 7px}
Il tutorial è concluso, per eventuali problemi e domande non esitate a chiedere! Spero che sia tutto chiaro e che possa esservi d'aiuto (:Tutorial realizzato da Valls ~ solo per lo Skin Factory.
Non spacciatelo per vostro e non postatelo altrove senza il mio permesso, per favore.
Edited by Valls ~ - 4/8/2013, 19:39
. -
Sasuke '95 .
User deleted
Grazie per il tutorial, mi serviva proprio 
Domanda: come faccio a realizzare più transitions per volta? Devo inserire tutto in un'unica transition o devo scriverne più di una (che so, per il color e per il border-radius)?
Io l'ho inserito così ma non so se ci sia un metodo più "efficiente"CODICEul.valls_tutorial li:hover {transition: border-radius .2s ease-in-out; background: #BC0000; border-radius: 5px 5px 0 5px; -moz-border-radius: .2s ease-in-out; transition: background .2s linear; color: #FFF; transition: color .2s linear}
EDIT: Ho riletto meglio il codice e ho trovato come fare, scusa per la domanda stupida
Edited by Sasuke '95 - 17/8/2013, 10:27. -
Sasuke '95 .
User deleted
Domanda stupida #2: Come faccio a cambiare il colore dei link solo all'interno del menù? . -
.
ul.valls_tutorial li =)
Per la transizione, ne basta 1 sola in generale =). -
Sasuke '95 .
User deleted
Se cambio il parametro "color" mi cambia solo il colore delle scritte "normali", non dei link . -
+1 .
Allora prova con CODICEul.valls_tutorial li a {color: XXX}. -
Sasuke '95 .
User deleted
Funziona, ti meriti un bel +1 anche tu 
. -
.
perchè non va come dico io? CODICE/*menu*/
ul.menu li {display: inline-block; border-radius: 5px 0 5px 0; background: #CCC; padding: 3px; margin-right: 2px; text-align: center}
. -
Valls ~ .
User deleted
Usa una classe diversa da ".menu", perchè già la barra utente è identificata da quel selettore. Se cambi ".menu" con (esempio) ".menu1", funziona tutto bene (: . -
.
adesso esce solo l'elenco... . -
Valls ~ .
User deleted
Devi modificare la classe sia in html che in colori e stili ^^ . -
.
e l'ho fatto . -
Valls ~ .
User deleted
Dev'esserci qualche altro codice che s'intromette, perchè se lo metti in fondo al forum funziona bene °° . -
Orizon` .
User deleted
Ottimo tutorial! 
. -
.
quindi come posso fare? T.T .
Realizzare un menù veloce[ HTML | Css ] Creare un menù e personalizzarne le voci. |
Web