|
| In un sito web un elemento di grande importanza è il menu, in particolare quello orizzontale, che si posiziona sopra o sotto l'header. Grazie ad esso è possibile organizzare una serie di link importanti da inserire magari in tutte le pagine, facilitando la navigazione all'utente e migliorando la fruibilità del sito stesso. In blog, a mio parere, questa funzione ha un'importanza ancora maggiore, dal momento che trovare i vari elementi potrebbe risultare più complicato rispetto ad un forum ed è in sostanza il modo migliore possibile per mettere in evidenza determinati articoli. Ho già parlato di come realizzare un menu orizzontale con la grafica della barra utente, ma quando questa soluzione non basta (come nel caso di questo blog) perché si vogliono mettere in risalto molti elementi, allora è utile creare un menu drop-down, che consenta di avere anche delle voci secondarie che vengono visualizzate in cascata al passaggio del puntatore del mouse. Con questo procedimento si può realizzare in pochi passaggi un menu personalizzato che abbia la stessa grafica della barra utente.
CSS (amministrazione > grafica > colori e stili)
CODICE #menu {padding: 0; margin: 0}
#menu ul {padding: 0; margin: 0}
#menu li {position: relative; float: left; list-style: none; margin: 0; padding: 0}
#menu li a {width: 100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white}
#menu li a:hover {background-color: red}
#menu ul ul {position: absolute; top: 30px; visibility: hidden}
#menu ul li:hover ul {visibility:visible}
La voce #menu deve avere gli attributi di menuwrap (nel foglio di stile), le altre sono personalizzabili a piacere, trattandosi delle voci presenti nella cascata. Come si può vedere nel menu di questo blog, io ho scelto di utilizzare lo stesso colore. Sostituendo il position: absolute con un position: fixed si rende fisso il menu, variando la percentuale si può adeguare la lunghezza alla barra utente, se questa non copre l'intero schermo in larghezza, infine con il text-align si può stabilire l'allineamento dei vari link.Read the whole post...
- Tags:
- Guide,
- Nerd Herd
|
|
