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
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
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
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
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.
Finalmente uno universale per tutti i browser!!
RispondiEliminacome 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/
@GaiaVincenzi
EliminaE' questa immagine
https://lh6.googleusercontent.com/-ohuTrNsBKmc/UOafG5sUpWI/AAAAAAAAeXQ/OlQ8mUol6oE/s640/pannello-verticale.png
che puoi modificare
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@GaiaVincenzi
EliminaForse 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 ...
Scusa, il menù a tendina consente anche dei sottomenù?
RispondiElimina@DavidQuetti
EliminaCi 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.
è 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@ PeSte
EliminaAnche 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.
provo subito... incrocio le dita...
Eliminagrazie
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
Eliminabuongiorno 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@ LadyBella
EliminaPer 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)
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@ LadyBella
EliminaSi possono inserire anche link esterni. Basta incollare qualsiasi URL. Mi riferisco ovviamente ai menù
grazie mille in questo cosa bisognerebbe avere un secondo blog ma non so se mi conviene
RispondiEliminaErnestos scusami qual'è la porzione di codice che personalziza l'ombreggiatura attorno ai riquadri delle colonne che scendono a tendina? grz
RispondiEliminae come si può modificare il colore del blocco grigio al passaggio del mouse in ogni voce del sottomenù?
Elimina@GaiaVincenzi
EliminaQuesto 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;
}
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@GaiaVincenzi
EliminaLa 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
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@LadyBella
EliminaLe 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.
grazie mille
EliminaErnesto scusami un'ultima cosa: per poterlo spostare all'interno del blog (più a destra, più in alto etc..) che css posso usare?
RispondiElimina#?{
margin-right: px;
margin-top: px;
}
grazie
@GaiaVincenzi
EliminaNon te lo so dire con certezza, dovresti fare dei test. Prova con
ul.dropdownmenu {
....
poi eventualmente con
ul.dropdownmenu ul {
.....
ecc
per informazione, è questo
Eliminaul.dropdownmenu {
;)
@GaiaVincenzi
EliminaIl primo che ti avevo suggerito :)
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@CarloDapuzzo
EliminaSe 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 :)
Grazie.
Eliminanon 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
Ho trovato la soluzione. Firefox richiede più spazio. Bisogna aggiungere
Eliminapiù volte prima della fine del menù.
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?
RispondiEliminaR @
EliminaTi posso solo suggerire di leggere i commenti 9.a e 9.b. Non penso di poter indicare altre strade per queste problematiche
Grazie continuerò a fare prove!
EliminaSpero di essere utile dicendo che la sezione per allineare le scritte del sottomenù è
Eliminaul.dropdownmenu ul a {
aggiungendo sotto un
margin-left:
Sei stato utilissimo. Io ci sarei arrivato lo stesso ma molti lettori che avessero il tuo stesso problema ora sanno dove andare a modificare
EliminaR @
è comparso il menù ma solo con le voci statiche... la voce con sottomenù non è comparsa... cosa ho sbagliato?
RispondiElimina@ Non è detto che tu abbia sbagliato. Ci potrebbero essere delle incompatibilità. Prova a installarlo in un'altra posizione, non si sa mai :)
EliminaNo, comunque lo metto, la voce che dovrebbe aprire il sottomenù non si vede proprio!!
EliminaOra la voce padre si vede, ma le voci figli no...
Eliminacosa devo controllare?
Ho provato ad inserire il tuo codice tale e quale e non funziona lo stesso.
EliminaIl menù non appare!
@ Federica
EliminaSe 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
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'è?
RispondiEliminain 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......
@# Devi solo personalizzare le singole voci
Elimina< 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
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?
Eliminahai una guida passo passo su come devo reindirizzare le pagine con il blog?
grazie attendo la tua risposta grazie
@# Temo di non aver capito nulla ma per il redirect vai qui
Eliminahttp://www.ideepercomputeredinternet.com/2012/03/come-fare-un-redirect-302-con-blogger.html
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@# 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 :(
EliminaCerto, 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@# No. Credo che dipenda anche dal menù che ha la particolarità di avere come sfondo una immagine
EliminaOk, grazie lo stesso! Ultimissima domanda, spero di non scocciarti troppo, per caso è possibile aumentare la larghezza del menù?
EliminaIl 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?
@# Prova a aumentare questo valore
Eliminawidth: 170px;
fino a che non ti soddisfa
Purtroppo aumentando questo valore mi aumenta la grandezza del singolo sottomenù, ma la barra del menù rimane invariata :(
EliminaEhi 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 :(
EliminaMi spiace ma mi prendi in un periodo in cui sono impegnatissimo. Riesco solo a rispondere ai commenti che non siano troppo impegnativi
EliminaCiao 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??
RispondiEliminaGrazie mille
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@#