Pubblicato il 04/01/13e aggiornato il

Menù verticale a tendina che funziona con tutti i browser.

Inserire in Blogger un Drop Down Menù o Menù a tendina con CSS e senza javascript che sia compatibile con tutti i browser.
La installazione di un menù è per gli utenti di Blogger una delle cose che porta via più tempo. Già difficile trovare del codice che sia compatibile con il modello che utilizziamo e spesso, quando lo abbiamo trovato, ci accorgiamo che il menù si visualizza correttamente solo con alcuni browser. Trovare un menù non proprio semplicissimo che funzioni con Internet Explorer è spesso una vera impresa.

Un altro discorso lo merita la libreria di javascript utilizzata. Spesso questa va in conflitto con altri javascript presenti nel modello frustrando le nostre ambizioni di avere un menù ricco di voci e di link. La soluzione che propongo l'ho testata con successo su Firefox, Chrome, Internet Explorer e Opera ed ha la particolarità di non utilizzare alcun javascript. La tendina che si visualizza quando si passa con il mouse su una voce principale è ottenuta tramite lo sfondo di una immagine. Inoltre il menù ha anche un effetto trasparenza che permette di non nascondere del tutto gli oggetti sottostanti. Viene utilizzato il nuovo linguaggio CSS3 che però è interpretato correttamente anche da IE

menu-verticale-dropdown

Ho pubblicato in rete anche una dimostrazione per poterlo testare de visu



Il codice per il menù l'ho invece pubblicato su Google Drive 
Tale codice può essere incollato su Aggiungi un gadget > HTML/Javascript > Sezioni del sito e posizionato subito sopra l'area del post o sotto l'Intestazione. In alcuni template questa operazione funziona mentre in altri non è fattibile. In questo caso si può operare direttamente nel modello. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si cerca la riga </header> che rappresenta la fine del codice della Intestazione. Il codice va incollato subito sotto questa riga. Questa opzione è quella che ho usato per la dimostrazione. Alternativamente si può cercare la riga

<div class='region-inner header-inner'>

e incollare il codice del menù subito sopra per averlo prima dell'Header. Volendolo esteso per tutto il layout si può anche incollare nei nuovi modelli subito sotto la riga

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Coloro che fossero interessati al menù possono provare anche altri posizionamenti. Ricordarsi sempre di salvare il modello prima di ogni modifica. Le personalizzazioni riguardano l'inserimento dei collegamenti alle varie voci. Basta incollare l'URL della pagina web al posto di URL del Link. Ovviamente le voci di prova che ho inserito sono puramente dimostrative e possono essere sostituite.
E' possibile eliminare le voci sovrabbondanti cancellandone la intera riga da <li> a </li> oppure inserire nuove voci con la stessa sintassi

<li><a href='URL del Link'>Voce 1</a></li>
<li><a href='URL del Link' target='_blank'>Voce 2</a></li>


La Voce 1, se cliccata aprirà la pagina collegata nella stessa scheda mentre la Voce 2 la aprirà in un'altra scheda visto la presenza del tag target="_blank". Quando con il mouse si punterà una voce secondaria questa si visualizzerà in grassetto con un effetto hover. Le voci inserite in questo modo

<li class='empty'>Voce 3</li>

non avranno il link collegato e avranno dei caratteri più grandi. Concludo ricordando che si possono modificare i colori cambiando i codici esadecimali dei colori in funzione del nostro layout.




57 commenti :

  1. Finalmente uno universale per tutti i browser!!
    come al solito ho dei problemi.. :( perchè modificando il colore dei titoli delle colonne, mi modifica solo i centrali, mentre quelli laterali rimangono bianchi?? :'(

    guarda qui: http://wishlist.iconadeironchi.com/

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      E' questa immagine
      https://lh6.googleusercontent.com/-ohuTrNsBKmc/UOafG5sUpWI/AAAAAAAAeXQ/OlQ8mUol6oE/s640/pannello-verticale.png
      che puoi modificare

      Elimina
    2. Scusami Ernesto forse mi sono spiegata male, intendevo dire che tra le 8 voci principali del mio menù http://wishlist.iconadeironchi.com/ (da dove poi scendono i vari sottomenù a tendina), le 4 centrali sono colorate correttamente, il testo dei due laterali da ambo i lati rimange bianco.. seppur abbia cambiato il codice colore..

      Elimina
    3. @GaiaVincenzi
      Forse ti sei dimenticata di sostituire qualche codice. Prova a cercare con F3 tutte le occorrenze del colore che hai modificato per vedere se ce ne sono altre. Altrimenti si tratta di una cosa veramente strana ...

      Elimina
  2. Scusa, il menù a tendina consente anche dei sottomenù?

    RispondiElimina
    Risposte
    1. @DavidQuetti
      Ci sono delle sezioni secondarie con la classe empty. In questo senso si possono chiamare dei sottomenù. Non è però un menù su più livelli, ce ne sono due soli.

      Elimina
  3. è fantastico... credevo d'aver capito... ho provato a editarne una prova mentre continuo a "allestirlo" ... ma come gadget non funziona! :-( ... c'è un modo per capire se devo passare alla soluzione B o se sbaglio qualcosa?

    RispondiElimina
    Risposte
    1. @ PeSte
      Anche nel blog in cui l'ho provato nel gadget HTML non andava e l'ho inserito nel modello direttamente dopo < /header >. Ci vuole un secondo per vedere se funziona, basta incollare il codice. Poi le voci e i link li metti in un secondo tempo.

      Elimina
    2. provo subito... incrocio le dita...
      grazie

      Elimina
    3. Errore di analisi XML, riga 858, colonna 53: Element type "a" must be followed by either attribute specifications, ">" or "/>". ma ce la posso fare!! :D

      Elimina
  4. buongiorno a te ernesto mi rimane solo una piccola cosa da capire:posso ingrandire i caratteri dei titoli delle pagine? se sì dove grazie mille

    RispondiElimina
    Risposte
    1. @ LadyBella
      Per ingrandire i caratteri devi modificare queste righe di codice

      font: bold 12px Arial, Helvetica, sans-serif;

      font-size: 11px;

      e mettere al posto di 11px e 12px un numero più grande (Es: 14px)

      Elimina
  5. grazie mille un'altra cosa se non sono invadente:collegare i link esterni a un altro blog lo trovi meglio? internamente non riesco a farlo

    RispondiElimina
    Risposte
    1. @ LadyBella
      Si possono inserire anche link esterni. Basta incollare qualsiasi URL. Mi riferisco ovviamente ai menù

      Elimina
  6. grazie mille in questo cosa bisognerebbe avere un secondo blog ma non so se mi conviene

    RispondiElimina
  7. Ernestos scusami qual'è la porzione di codice che personalziza l'ombreggiatura attorno ai riquadri delle colonne che scendono a tendina? grz

    RispondiElimina
    Risposte
    1. e come si può modificare il colore del blocco grigio al passaggio del mouse in ogni voce del sottomenù?

      Elimina
    2. @GaiaVincenzi
      Questo menù era di un portale della Adobe quindi non ne conosco tutti i meccanismi. L'ombreggiatura laterale è data dall'immagine
      https://lh6.googleusercontent.com/-ohuTrNsBKmc/UOafG5sUpWI/AAAAAAAAeXQ/OlQ8mUol6oE/s640/pannello-verticale.png
      mentre per modificare il colore grigio della voce secondaria al passaggio del mouse devi operare su questi codici

      ul.dropdownmenu li:hover {
      background-color: #222;

      ul.dropdownmenu ul a:hover {
      padding: 3px 5px 3px 11px;
      border: solid 1px #ddd;
      background-color: #eee;
      font-weight: bold;
      }
      Si può anche centrare meglio il rettangolo grigio inserendo la riga
      margin-left:-5px;
      In questo modo
      ul.dropdownmenu ul a:hover {
      margin-left:-5px;
      padding: 3px 5px 3px 11px;
      border: solid 1px #ddd;
      background-color: #eee;
      font-weight: bold;
      }

      Elimina
    3. grazie. scusa l'ultima cosa che ti chiedo se tu l'hai individuata, io non riesco a trovarla.. qual'è il valore da cambiare per aumentare la grandezza dei bloocchi del menù e dei sottomenù? grazie ancora

      Elimina
    4. @GaiaVincenzi
      La dimensione dei menù e dei sottomenù non è definita ma dipende dallo spazio lasciato nelle quattro direzioni. Devi considerare i codici come questo
      padding: 7px 20px 7px 12px;
      7px è la distanza del testo dalla parte alta del rettangolo, 20px la distanza dalla destra, 7px la distanza dal basso e 12 pixel la distanza dalla sinistra. In sostanza il primo valore è la distanza dalla parte alta e poi si va in senso orario per le altre direzioni. Modificando questi parametri specie i due 7px si dovrebbero allargare o restringere. Oltre a questo padding ce ne sono altri e quindi c'è da fare un lavoro certosino

      Elimina
  8. scusa ernesto un'ultima cosa.le pagine statiche massi se ne possono mettere 20 ma nel menù a tendine delle sottopagine quante ?grazie mille

    RispondiElimina
    Risposte
    1. @LadyBella
      Le pagine di Blogger sono un massimo di 20 ma in questo menù ci puoi mettere pagine, post, etichette, link esterni e quant'altro. Il numero poi dipende dal tuo layout, non c'è un limite.

      Elimina
  9. Ernesto scusami un'ultima cosa: per poterlo spostare all'interno del blog (più a destra, più in alto etc..) che css posso usare?

    #?{
    margin-right: px;
    margin-top: px;

    }


    grazie

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Non te lo so dire con certezza, dovresti fare dei test. Prova con
      ul.dropdownmenu {
      ....
      poi eventualmente con
      ul.dropdownmenu ul {
      .....
      ecc

      Elimina
    2. per informazione, è questo

      ul.dropdownmenu {


      ;)

      Elimina
    3. @GaiaVincenzi
      Il primo che ti avevo suggerito :)

      Elimina
  10. Veramente dispiaciuto. Dopo aver lavorato una giornata è venuto fuori veramente un bel menù, peccato che funzioni solo con Chrome e Safari. In firefox l'immagine sottostante è tutta a sx in IE semplicemente inguardabile. Chissa dove ho sbagliato?

    RispondiElimina
    Risposte
    1. @CarloDapuzzo
      Se in 2 browser si vede non hai sbagliato nulla. Il problema è che ci vorrebbe uno standard per cui un oggetto si dovrebbe vedere nello stesso modo in tutti i browser. Lo sai quante volte è capitato anche a me :)

      Elimina
    2. Grazie.
      non mi sono arreso e ho ridimensionato il menu così adesso si vede su IE ma l'immagine sottostante è sempre tutta a sinistra in firefox. Pensi si possa rimediare in qualche modo http://empills.blogspot.it/
      Inutile dire che ho centrato l'immagine e header come da te suggerito :http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html

      Ancora grazie

      Elimina
    3. Ho trovato la soluzione. Firefox richiede più spazio. Bisogna aggiungere
      più volte prima della fine del menù.

      Elimina
  11. Anch'io ho spostato le schede del menù da ul.dropdownmenu { ma stranamente le scritte del sottomenù restano disallineate sia rispetto alle schede di menù che all'immagine di sfondo del sottomenù stesso, secondo te con quale codice posso riportarle in linea?

    RispondiElimina
    Risposte
    1. R @
      Ti posso solo suggerire di leggere i commenti 9.a e 9.b. Non penso di poter indicare altre strade per queste problematiche

      Elimina
    2. Grazie continuerò a fare prove!

      Elimina
    3. Spero di essere utile dicendo che la sezione per allineare le scritte del sottomenù è
      ul.dropdownmenu ul a {
      aggiungendo sotto un
      margin-left:

      Elimina
    4. Sei stato utilissimo. Io ci sarei arrivato lo stesso ma molti lettori che avessero il tuo stesso problema ora sanno dove andare a modificare
      R @

      Elimina
  12. è comparso il menù ma solo con le voci statiche... la voce con sottomenù non è comparsa... cosa ho sbagliato?

    RispondiElimina
    Risposte
    1. @ Non è detto che tu abbia sbagliato. Ci potrebbero essere delle incompatibilità. Prova a installarlo in un'altra posizione, non si sa mai :)

      Elimina
    2. No, comunque lo metto, la voce che dovrebbe aprire il sottomenù non si vede proprio!!

      Elimina
    3. Ora la voce padre si vede, ma le voci figli no...
      cosa devo controllare?

      Elimina
    4. Ho provato ad inserire il tuo codice tale e quale e non funziona lo stesso.
      Il menù non appare!

      Elimina
    5. @ Federica
      Se il codice del test non appare e lo hai copiato bene allora c'è poco da fare. Significa che non può essere inserito nel tuo modello

      Elimina
  13. Ciao Ernesto scusa una cosa io inserisco il codice che hai messo su google drive in un gadget ma poi il codice da inserire nel html del blog qual'è?
    in pratica questo menu e fichissimo pero non capisco come spezzarlo per inserirlo attendo con ansia una tua risposta o una grandissima illuminazione per come sistemare il tutto scusami se sono palloso in quello che ti ho scritto ma è un mese che cerco un menu per il mio blog che si adatti alle mie esigenze......

    RispondiElimina
    Risposte
    1. @# Devi solo personalizzare le singole voci
      < li >< a href='URL del Link' > Media Center < /a >< /li >
      inserendo l'URL dei tuoi post o delle tue pagine e i nomi dei menù che vuoi personalizzare

      Elimina
    2. senti un altra cosa io vorrei mettere delle pagine sul blog per spostare i post che ho pubblicato nella sezione giusta per poter lasciare la home libera per altre cose come devo fare?
      hai una guida passo passo su come devo reindirizzare le pagine con il blog?
      grazie attendo la tua risposta grazie

      Elimina
    3. @# Temo di non aver capito nulla ma per il redirect vai qui
      http://www.ideepercomputeredinternet.com/2012/03/come-fare-un-redirect-302-con-blogger.html

      Elimina
  14. Ciao Ernesto, il menù funziona correttamente, soltanto che con il mio template rimane totalmente attaccato a sinistra dello schermo. Per ovviare al problema ho seguito il consiglio riportato al commento (n°) 9 e 9b, cioè ho aggiunto un margine da sinistra, e sono riuscito a staccarlo! Adesso però il menù, stranamente, non rimane sempre fisso ma si sposta in base all'apertura della finestra, ad esempio: se metto la finestra del browser full screen si vede bene, se la rimpicciolisco il menù si vede a destra! Cosa posso fare? Grazie in anticipo per la risposta..

    RispondiElimina
    Risposte
    1. @# Guarda che questo problema è presente in quasi tutti i menù. Se apri una pagina con un computer da 1600 pixel non è la stessa cosa se lo apri con uno da 1024 pixel. E' difficile darti indicazioni in tal senso :(

      Elimina
    2. Certo, la problematica che dici credo di conoscerla. Il mio problema è invece che il menù appunto non si muove in sincrono col blog: se restringo la finestra il blog si adatta, mentre il menu rimane fisso, come se non facesse parte integrante del mio blog, se allargo succede la stessa cosa. Questo può dipendere dal mio modello?

      Elimina
    3. @# No. Credo che dipenda anche dal menù che ha la particolarità di avere come sfondo una immagine

      Elimina
    4. Ok, grazie lo stesso! Ultimissima domanda, spero di non scocciarti troppo, per caso è possibile aumentare la larghezza del menù?
      Il perchè risiede nel fatto che le voci sono poche e quindi il menù s'interrompe a metà del blog, cosa che risulta parecchio antiestetica, è possibile porvi rimedio?

      Elimina
    5. @# Prova a aumentare questo valore
      width: 170px;
      fino a che non ti soddisfa

      Elimina
    6. Purtroppo aumentando questo valore mi aumenta la grandezza del singolo sottomenù, ma la barra del menù rimane invariata :(

      Elimina
    7. Ehi Ernesto credo di aver capito che il problema risiede nel fatto che la parte "header" del mio template sia settata non per stare in linea con la parte alta e bassa del template, che inizia e finisce ad un certo punto, ma per partire dall'inizio e concludersi alla fine della finestra del browser! Cosa questa che ho cercato di modificare proprio osservando attentamente i valori del template di default (il modello è fantastico S.P.A. credo) ma non trovo il valore corretto tu sapresti dirmi qual'è? So che è una richiesta non semplice ma non so proprio a chi rivolgermi :(

      Elimina
    8. Mi spiace ma mi prendi in un periodo in cui sono impegnatissimo. Riesco solo a rispondere ai commenti che non siano troppo impegnativi

      Elimina
  15. Ciao Ernesto, scusa la domanda un pò blasfema, ma come faccio a prelevare il codice di questo interessantissimo menù a tendina da google drive?? Mi aiuteresti per favore perchè vorrei tanto inserirlo sul mio blog??
    Grazie mille

    RispondiElimina
    Risposte
    1. Con il mouse selezioni il codice, solo il codice e quindi non la prima riga con il titolo "Codice del DropDown Menu", quindi clicchi sulla selezione con il destro del mouse e scegli Copia. Successivamente apri Blocco Note o un programma simile e, sempre con il destro del mouse vai su Incolla. Il codice lo puoi quindi modificare a tuo piacere per poi fare la stessa cosa e incollarlo con le modalità illustrate nel post
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.