26 giugno 2011

Menu orizzontale semplice ma completamente personalizzabile.

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

drag & drop elemento menu

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

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

Fonte | Wordpress Forum

 



23 commenti:

  1. Un'esperimento nel blog,purtroppo non è venuto.E' troppo presto per augurarti la Buonanotte?Buon riposo,Ernesto.Lucia D.ciao

    RispondiElimina
  2. non mi funziona nessun menu orizzontale ...forse è un problema del mio template visto che se lo provo un un blog di prova con quelli nuovi funziona perfettamente....

    in pratica faccio tutto corretto ma poi il menu compare VERTICALE :(((

    RispondiElimina
  3. @Lucky73
    Questo dovrebbe funzionare a tutti. E' strano

    RispondiElimina
  4. Ciao Ernesto,è una giornata molto calda a Trento,ma non mi posso davvero lamentare.Sono diventata un pò pigra,il caldo fa di questi effetti,con il computer.Spero di rifarmi.Forse se si appesantisce troppo il template con codici di widget,è un problema?Non occorre che mi rispondi,cerco di arrangiarmi.E' che se per caso ti capita di vedere che ho fatto degli errori,e sono rimasti lì,ne sono consapevole.Mi dispiacerebbe applicare male le tue idee.Ma preferisco aspettare il fresco.Ciao,buona giornata,Lucia D.

    RispondiElimina
  5. @lucia
    A Firenze fa certamente più caldo che a Trento. Prima di modificare il template ricordati sempre di salvarne una copia così, qualunque cosa combinassi, potrai sempre ripristinare la situazione precedente

    RispondiElimina
  6. Alla fine,non ho fatto quasi niente neanche con il fresco.Internet è molto dispersivo,più del computer isolato.Ma domani è un altro giorno,che poi è oggi,già.Aprire molte finestre nel browser,spero di non sbagliare nel termine,è utile.Da una parte leggi,dall'altra ascolti un video.Buonanotte Ernesto,Lucia D.

    RispondiElimina
  7. io ho messo una tabella e il risultato è simile

    RispondiElimina
  8. Ciao ascolta io ho seguito passo passo tutto ma perchè nn mi esce nulla??? possibile sia un mio problema??

    RispondiElimina
  9. @Leazzurredilavezzi
    Trovare un menù compatibile specialmente con i nuovi template è una impresa. Provane altri. Eventualmente segui anche questo tutorial
    http://www.ideepercomputeredinternet.com/2011/04/come-installare-i-menu-anche-nei.html

    RispondiElimina
  10. Ciao Buongiorno Ernesto a me funziona ma volevo sapere sul tasto contattami come posso mettere l'email?

    RispondiElimina
  11. @princess
    Non si può aggiungere la email in questo caso ma l'URL di una pagina dove c'è il nostro modulo di contatto
    http://www.ideepercomputeredinternet.com/2010/08/come-creare-una-pagina-di-contatto-un.html

    Puoi provare anche scrivendo nella riga della email al posto di
    href="#"
    questo indirizzo
    href="mailto:tuoindirizzoemail"
    ovviamente al posto di indirizzo email ci metti una cosa tipo
    princess@gmail.com
    in qualche modello funziona e si apre il programma predefinito di posta elettronica

    RispondiElimina
  12. Grazie Ernesto ci sono riuscitaaaaaa buona giornata :D

    RispondiElimina
  13. Io per creare la barra menù orizzontale ho utilizzato semplicemente il gadget "Pagine" offerto da google.
    Avendo molte pagine e non avendo trovato un menù a tendina compatibile con il mio blog, il menù si è diviso in due righe, e fin qui niente di male.
    Il problema è che ho visto che a seconda della grandezza dello schermo del computer da cui si guarda il blog, il testo all'interno delle due righe si sposta e si adatta, soprattutto alla fine della prima riga, creando in alcuni pc un antiestetico spazio tra le due righe.
    Sai se nel mio caso c'è modo per definire una lunghezza fissa della barra menù, affinchè non si modifichi da qualsivoglia computer la si guardi?
    Grazie

    RispondiElimina
  14. @Dieta e Dintorni
    Hai fatto bene a usare le pagine. Quando ho scritto questo post quel widget non c'era ancora. Riguardo alla tua domanda non mi risulta si possa fare nulla se non quello di diminuire al minimo la lunghezza dei titoli delle pagine per fare in modo che entrino in una sola riga.

    RispondiElimina
  15. Anche diminuendo al minimo i nomi delle pagine, una riga non sarebbe sufficiente. E se invece creassi un menù proprio come questo del tuo post, le cose cambierebbero?
    Cioè, la lunghezza delle due righe di menù rimarrebbe fissa? Ma soprattutto, posso usare questo tipo di menù distribuito su due righe?
    Grazie :)

    RispondiElimina
  16. Piccolo aggiornamento: ho provato a creare una barra come quella da te indicata in questo post, e tutto funziona regolarmente, però mi dà lo stesso identico problema che mi dava l'altra: si rimpicciolisce o allarga a seconda del pc da dove la si guarda, ammucchiando in fondo alla prima riga le lettere e creando un antiestetico spazio tra una riga e l'altra.
    In questo caso, essendo che ho utilizzato un codice da te fornito, sai se posso inserire una stringa o modificare l'html per evitare che accada e per mantenere fissa la lunghezza della barra?
    Grazie ancora

    RispondiElimina
  17. @Dieta e Dintorni
    Se vuoi mettere molte voci non ti resta che usare un menù a più livelli. Prova con questo
    http://www.ideepercomputeredinternet.com/2011/02/menu-orizzontale-su-piu-livelli-per.html
    Forse adesso sei abbastanza pratica per poterlo installare.

    RispondiElimina
  18. Ciao Ernesto, è possibile fare in modo che il link della pagina selezionata sia in grassetto?

    RispondiElimina
    Risposte
    1. @LaCucinaImperfettadiGiuliana
      Se vuoi che il link sia in grassetto solo se selezionato devi sostituire questo codice

      #mainNav a:hover,
      #mainNav a:active{
      text-decoration: underline;
      color: #940f04; // Colore del link al passaggio del mouse
      }

      con quest'altro

      #mainNav a:hover,
      #mainNav a:active{
      text-decoration: underline;
      font-weight:bold;
      color: #940f04; // Colore del link al passaggio del mouse
      }

      Elimina
    2. Ciao Ernesto,
      stiamo provando ad inserire sotto al titolo del nostro blog un semplice menu orizzontale, ma non ci riusciamo. Il menu drop down in alto al titolo del blog potrebbe bloccarlo? Grazie

      Elimina
    3. Penso sia più un problema di modello. In alcuni template quando sui cerca di mettere un menù con un elemento pagina nell'area dell'header è difficile trascinarlo e qualche volta non si visualizza correttamente
      @#

      Elimina
  19. Grazie mille per la tua risposta! Non sappiamo come, ma ora funziona! :-) guarda http://detailsofus.blogspot.it ci rimane ancora il problemino in alto ... Non ci riusciamo proprio ... Bo!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.