Menu orizzontale semplice ma completamente personalizzabile.

Menù semplicissimo per utenti di Blogger alle prime armi.

Quando si inizia quella che è l'avventura di aprire un blog, spesso non ci sono chiari, non solo gli obiettivi, ma neppure i primi passi necessari per dargli un aspetto non solo attraente ma che abbia anche un certo livello di usabilità per i lettori. Per usabilità si intende tutti quei meccanismi che aiutano il navigatore a cercare più facilmente le informazioni di cui ha bisogno. Si tratta quindi di installare il widget degli ultimi articoli e quello degli ultimi commenti nonché di mostrare il gadget delle etichette e quello dell'archivio. Un aspetto importante in questo contesto ce l'hanno anche i menù che servono per linkare le pagine più importanti del blog. 

Attraverso le pagine statiche è possibile creare automaticamente un menù che può essere inserito orizzontalmente sotto l'intestazione oppure verticalmente in una sidebar. E' anche possibile aggiungere alle pagine statiche anche tutta un'altra serie di link per arricchirlo di nuovi collegamenti. Con questo post voglio presentare uno dei menù più semplici che possano essere installati. E' concepito solo con HTML e CSS senza Javascript ed è quindi funzionante con tutti i browser e con tutti i modelli. Credo che possa essere utilizzato da chi abbia un blog con un numero di post relativamente basso e senza esigenze particolari. Mi sento di consigliarlo a che sta iniziando da poco e si sta cimentando per la prima volta nella installazione di un menù.

Si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga ]]></b:skin> che indica la fine dei fogli di stile e, immediatamente sopra di essa, si incolla il seguente codice

/* MENU SEMPLICE */
#mainNav{
margin-top: 10px;
padding: 5px;
background: #FFEAE9; // Colore di sfondo
border-top: 1px solid #FDBCB7; //  Colore del bordo superiore
border-bottom: 1px solid #FDBCB7; // Colore del bordo inferiore
}
#mainNav ul{
margin: 0 auto;
width: 60em;
text-align: left
}
#mainNav li{
display: inline;
margin-right: 20px;
font-size: 1.5em; // Dimensione dei caratteri
text-transform: uppercase;
}
#mainNav li:last-child{
margin-right: 0;
}
#mainNav a:link,
#mainNav a:visited{
color: #003366; // Colore dei link e di quelli visitati
white-space: nowrap;
}
#mainNav a:hover,
#mainNav a:active{
text-decoration: underline;
color: #940f04; // Colore del link al passaggio del mouse
}
#mainNav .current_page_parent a:link,
#mainNav .current_page_parent a:visited,
#mainNav .current_page_item a:link,
#mainNav .current_page_item a:visited{
font-weight: bold;
color: #114477; // Colore del link della pagina aperta
}
#mainNav .current_page_parent a:hover,
#mainNav .current_page_parent a:active,
#mainNav .current_page_item a:hover,
#mainNav .current_page_item a:active{
color: #225588; // Colore del link della pagina aperta al passaggio del mouse
}

Si salva il modello. Accanto ai codici dei colori sono indicati gli elementi a cui si riferiscono. Possono anche essere personalizzati il bordo superiore e quello inferiore, non solo come colore, ma anche come forma e dimensione consultando il post sullo stile dei bordi. Quando il mouse passa sopra un link, l'aspetto del menù è determinato dalla pseudo-classe a:hover che crea una sottolineatura colorata. Le dimensioni dei caratteri del menù e la sua larghezza sono definiti in funzione della dimensione del carattere principale del blog in cui viene inserito (font-size: 1.5em; significa che il font del menù è del 50% più grande di quello dei post mentre width: 60em; indica che la sua larghezza è 60 volte la dimensione del carattere). E' anche possibile personalizzare i margini che sono le distanze rispetto agli altri elementi del layout e i padding che invece sono le distanze interne rispetto al contenitore.

Il menù vero e proprio dobbiamo crearlo secondo le nostre esigenze seguendo questa sintassi di esempio

<div id="mainNav">
<ul>
<li class="page_item page-item current_page_item"><a href="#" title="home">HOME</a></li>
<li class="page_item page-item"><a href="#" target="_blank" title="profilo">PROFILO</a></li>
<li class="page_item page-item"><a href="#" title="email">CONTATTAMI</a></li>
<li class="page_item page-item"><a href="#" title="info">ABOUT</a></li>
<li><a href="#">FEED</a></li>
</ul>
<noscript><a href='http://goo.gl/cdn3j' target='_blank'><span style='font-size: x-small;'>Simple Menu</span></a></noscript>
</div>

I cancelletti ( # ) debbono essere sostituti dagli URL dei post o delle pagine che volete collegare alle voci che sono colorate di rosso e che si vedranno materialmente nel blog. L'espressione target="_blank" serve per aprire la pagina in un'altra scheda e può essere utilizzata per i link esterni al blog. Si possono aggiungere tutte le voci che vogliamo in funzione dello spazio a disposizione. E' sufficiente inserire altre righe con questa struttura 

<li><a href="URL LINK">NOME LINK</a></li>

Opzionalmente si può anche aggiungere il tag Title e quello target="_blank". Quando si è personalizzato il codice, si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla su Sezioni del sito. Si salva e in Design > Elementi pagina si trascina con il mouse nel punto in cui lo si vuole visualizzare

Si salva nuovamente e si controlla la nostra realizzazione. Ho postato in rete una

• Demo del Menù Semplice -

Coloro che volessero qualcosa di più sofisticato possono consultare questo elenco dei post relativi ai menù oppure andare direttamente nella etichetta.

Fonte | Wordpress Forum -