Pubblicato il 25/02/10 - aggiornato il  | 104 commenti :

Come inserire in un blog su Blogger un menù orizzontale multilivello.

Menù multilivello per Blogger con personalizzazioni di colori e voci e con l'inserimento di sottomenù.
Dopo numerose richieste sull'argomento e dopo che mi è stato fatto notare che su Dynamic Drive esiste un menù di questo tipo mi sono riproposto di presentarlo sicuro che incontrerà il gradimento di molti blogger. Prima di iniziare la personalizzazione andate a vedere il post sul menù multilivello nel mio blog di prova.

Come vedete si possono inserire tutti i livelli che si vogliono con tutti i sottomenù che ci servono. Nell'immagine precedente sono arrivato fino a quattro ma si possono anche inserirne di nuovi con il metodo classico della nidificazione dei tag. Di default lo sfondo del menù è di colore grigio ma ovviamente può essere adattato al nostro blog.

Andiamo su Layout > Modifica HTML e scarichiamo il modello completo. Cerchiamo la riga
</head>
e, immediatamente sopra, incolliamo il seguente codice

<!--MENU MULTILIVELLO INIZIO-->
<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/javascript-2/jqueryslidemenu.js"></script>
<!--MENU MULTILIVELLO FINE-http://www.ideepercomputeredinternet.com/-->

Salviamo il modello. Adesso andiamo su Layout > Elementi pagina > HTML/Javascript e incolliamo il menù vero e proprio che potrà avere un codice di questo tipo

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.ideepercomputeredinternet.com">Home</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html">Crea Blog</a></li>
<li><a href="#">Risorse Blogger</a>
<ul>
<li><a href="http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">96 risorse per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/altre-16-risorse-per-blog-su-blogger.html">99 Risorse per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html">Guadagnare con un blog</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/02/elenco-di-tutorial-per-inserire-bottoni.html">Bottoni di voto</a></li>
</ul>
</li>
<li><a href="#">Widget e Menu</a>
<ul>
<li><a href="http://www.ideepercomputeredinternet.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html">Widget Benvenuto</a></li>
<li><a href="#">Widget</a>
<ul>
<li><a href="http://www.ideepercomputeredinternet.com/2010/02/aggiungere-il-widget-degli-ultimi-post.html">Ultimi Articoli</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/02/il-widget-degli-ultimi-commenti-per.html">Ultimi Commenti</a></li>
<li><a href="#">Menù</a>
<ul>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-creare-un-menu-espandibile-da.html">Menù a soffietto</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-inserire-un-menu-laterale-tendina.html">Menù Laterale</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-inserire-tre-menu-scorrevoli.html">Tre menù</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/01/come-inserire-un-menu-orizzontale.html">Menù orizzontale</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/12/il-fantastico-widget-dell-con-il.html">Archivio con calendario</a></li>
</ul>
</li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/01/come-inserire-il-widget-degli-ultimi.html">Ultimi post con miniature</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Altro</a>
<ul>
<li><a href="http://videoblog32.blogspot.com/">Videochat gratis</a></li>
</ul>
</li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">Disclaimer e Privacy</a></li>
</ul>
<br style="clear: left" />
</div>

Istruzioni per creare più livelli di menù -
Il concetto è quello di partire dalla struttura base cioè con le voci principali che faranno parte della prima riga. Si parte quindi da un codice di questo tipo


<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
<br style="clear: left" />
</div>

dove al posto degli asterischi possono essere messi (eventualmente) gli URL dei collegamenti. Se si vuole creare un menù di livello più basso, per esempio nella Voce 2, si inserisce un codice di questo genere

<ul>
<li><a href="#">Voce 2.1</a></li>
<li><a href="#">Voce 2.2</a></li>               
<li><a href="#">Voce 2.3</a></li>
<li><a href="#">Voce 2.4</a></li>
<li><a href="#">Voce 2.5</a></li>
</ul>
tra il tag </a> e quello </li>. Viene cioè una cosa di questo tipo
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a>
<ul>
<li><a href="#">Voce 2.1</a></li>
<li><a href="#">Voce 2.2</a></li>
<li><a href="#">Voce 2.3</a></li>
<li><a href="#">Voce 2.4</a></li>
<li><a href="#">Voce 2.5</a></li>
</ul>
</li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
<br style="clear: left" />
</div>
dove il codice del sottomenù è stato evidenziato di rosso e le tag tra le quali è stato inserito sono in grassetto e evidenziate di viola. Si possono inserire altri sottomenù con lo stesso metodo. Basterà inserire il codice del sottomenù per esempio all'interno della Voce 2.3 con una struttura siffatta

<li><a href="#">Voce 2.3</a>
Codice sottomenù
</li>

Se si vuole personalizzare il colore del menù bisogna scaricare il foglio di stile relativo che si trova a questo indirizzo

http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css

aprirlo con Notepad++ se modificarlo. I parametri da  modificare sono:
  1. Il colore di sfondo che di default è #414141;
  2. La grandezza dei caratteri (13 pixel) e la famiglia di font
  3. Il colore della voce quando è puntata con il mouse; senza modifiche è black
Dopo averlo modificato e averlo rinominato in CSS deve essere caricato su un hosting che supporti gli script come Google Sites. Dopo averne acquisito l'indirizzo si sostituisce a quello del file che abbiamo scaricato. Questo menù multilivello è stato testato con tutti i browser più recenti e non dà alcun problema di visualizzazione.

Aggiornamento n°1: Se si vogliono togliere la freccia verticale e quella orizzontale destra, bisogna aprire il file http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css, cercare i blocchi di codice che riguardano le due frecce e che sono

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
display:none;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
display:none;
}

quindi inserire le due righe display:none; salvarlo e caricarlo su un nostro hosting. Si può anche  togliere una sola freccia (p.e. quella verticale), incollando una sola riga. Si deve acquisire l'URL del file e sostituirlo nel codice da incollare nel modello.

Aggiornamento n°2 - Se si ha un blog con dominio personalizzato del tipo www.esempio.com bisogna caricare i javascript su DropBox o su un hosting personale.

Fonte | Dynamic Drive -




104 commenti :

  1. Mi spieghi xche se le 'cos'è' le spieghi tu diventano subito comprensibili?;-) che farei senza di te non me lo immagino proprio....secondo te questo menù e' compatibile con ie 6? O almeno con il 7? Praticamente il mio nuovo bellssimo template non era compatibile perfettamente con quell'accrocco di browser e l'ho dovuto togliere x gli utenti che avevano problemi nella visualizzazione...

    RispondiElimina
  2. @astasia
    Le cose le spiego in modo analitico perché anch'io mi sono avvicinato da dilettante al mondo del web e non do le cose per sapute come fanno i "professionisti", inoltre ho una innata "vocazione didattica" :-))
    Per quanto riguarda IE6 anche Youtube ha cessato il supporto....
    su IE7 dovrebbe funzionare, almeno così ho letto su Dynamic Drive.
    Ciao

    RispondiElimina
  3. ciao parsifal,
    ho deciso di inserire questo modello di linkbar perché con la classica si ottengono solo pochi collegamenti.

    Ho un problemino con il template, ho scaricato quelli ourblogtemplate così se li conosci hai un idea.

    Quando si apre il menu i collegamenti sono nascosti dalla sezione sotto facendomi visualizzare solo una piccola parte del menu espanso e il resto coperto.
    Come posso ovviare al problema, c'è una funzione che porta il menu in primo piano o come posso togliere quell'intersecazione?

    Grazie ancora

    RispondiElimina
  4. @occhioalfolletto
    La soluzione è quella di portare le voci multiple più a sinistra in modo tale da non essere nascoste dalla sidebar. Credo che sia questo il problema che hai riscontrato.
    Ciao

    RispondiElimina
  5. No, <a href="http://blogprovafolletto.blogspot.com/>questo </a>è il mio blog di prova e come vedi non è la sidebar ma quello spazio.

    Ti sarei moolto grato se riusciamo a risolvere questo problema, ho diversi post collegati e importanti che i link che mostro sono ben pochi e questa scelta di menu ad espansione è davvero ottima.

    Grazie sempre per le risposte puntuali.

    RispondiElimina
  6. No, questo è il mio blog di prova e come vedi non è la sidebar ma quello spazio.

    Ti sarei moolto grato se riusciamo a risolvere questo problema, ho diversi post collegati e importanti che i link che mostro sono ben pochi e questa scelta di menu ad espansione è davvero ottima.

    Grazie sempre per le risposte puntuali.
    http://blogprovafolletto.blogspot.com/

    RispondiElimina
  7. Anche se credo che la struttura del template non è compatibile :(

    RispondiElimina
  8. @occhioalfolletto
    E' possibile che ci siano delle incompatibilità. Prova a spostare l'elemento pagina sopra all'header per vedere se in questo caso il menù si apre completamente.
    Ciao

    RispondiElimina
  9. Si avevo già provato a mettere il widget spora la sezione post e lì funziona egregiamente.

    Hai altre idee se questo menu multilivello non funzionerebbe sul mio template..? Magari dei menu con un livello soltanto..

    Grazie sempre

    RispondiElimina
  10. @occhioalfolletto
    Ti consiglio un menù simile al mio che puoi trovare in questa pagina
    http://parsifal32.blogspot.com/2010/01/come-inserire-un-menu-orizzontale.html
    Ci si possono mettere un sacco di voci. Prova a vedere se è compatibile con il tuo modello e se viene visualizzato correttamente. Ciao

    RispondiElimina
  11. Ho inserito il menu da te indicato, avevo prima installato quello ad espansione, soltanto che l'ho tolto quando hai scritto che è utile tenere una pagina leggera.

    Il menu orizzontale da un altro problema, se tu vai a guardare il blog di prova noti che il menu dei link si aprono molto sotto il menu orizzontale...

    RispondiElimina
  12. Riciao! Mi consiglio un "posto" dove posso caricare i miei file java in santa pace???Tutti quelli che mi segnalano in rete quando vado a caricare i file java si bloccano e non caricano nulla...
    Un incubo!!!
    Grazie!!!
    Ciao
    Astasia

    RispondiElimina
  13. @astasia
    Attualmente è disponibile una scelta veramente ottima, si tratta di Google Sites. Devi creare una pagina nella modalità schedario o file manager come illustrato nella parte finale di questo post
    http://parsifal32.blogspot.com/2009/11/google-sites-aggiunge-nuovi-modelli-per.html
    Ciao

    RispondiElimina
  14. problema:
    ho inserito il menu a tendina... ma lo vorrei poggiato sul bordo sottostante invece mi risulta + su di 5 o 10 px.
    In + vorrei che i colori di fondo ora un nero trasparente... diventasse beige o arancio di cui ho i codici, ma nn so dove metterli e nn so se devo intervenire sullo js o sull'html del mio blog.
    Se guardi al link
    http://soffiodideanailart.blogspot.com/
    il colore di ogni singolo menu (home, galleria,...) è nero trasparente come il bordo finale del mio blog... e nn mi piace :( se mi dici dove devo mettere mano te ne sarei grata. kiss e grazie

    RispondiElimina
  15. sempre io :P allora ho risolto il problema del colore di sfondo dei singoli menu... ho dovuto modificare l'html del blog... ora resta solo il problema che nn aderiscono al bordo inferiore :)e qui mi sa che dovresti aiutarmi kiss

    RispondiElimina
  16. @soffio di dea
    Hai veramente inserito il codice di questo articolo?
    Non mi sembra possibile perché ha una forma completamente diversa rispetto a quello che vedo nel tuo blog. Se è così (e lo è perché ho visto il tuo codice sorgente) la forma diversa dipende da degli stili già presenti nel tuo template.
    Per modificare i colori di questo menù avresti dovuto scaricare il file
    http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css
    aprirlo con Notepad++, cambiare i codici dei colori e caricarlo su Google Sites; quindi sostituire l'URL nel codice. Questo era già scritto nel post.
    Per il problema della mancata aderenza al bordo inferiore siamo nel campo delle cose che sono al di sopra delle mie possibilità perché dipendono dal tuo modello e da come questa personalizzazione viene "accettata".
    Ciao
    P.S. Non mi sembra un gran danno estetico...
    Non me ne ero neppure accorto :-)
    Sarà che non ho una personalità molto portata per tutto ciò che è artistico :-)

    RispondiElimina
  17. allora... sisi ho scaricato il tuo js, modificato, creato il mio sito su google e caricato lì... poi ho scoperto che x cambiare il colore alla schede bastava andare in layout -.-' dopo averci xso la testa una mattinata... ho numeri e script che mi escono dai pori! :D
    riguardo all'"aderenza" si credo anche io che devo modificare qualche numeretto nel mio html ma ora "nun glia fo" sono distrutta... l'importante era creare il menu a tendina x non creare un elenco smisurato al lato... e grazie a te ho realizzato :* kiss

    RispondiElimina
  18. Eccomi qui ancora... tornata "vittoriosa" :) dopo ore di studio del mio html... ho scoperto che bastava andare in tabs e modificare delle lunghezze espresse in em e crearle delle altre... e così sono riuscita a far combaciare la barra delle schede con il blog... senza + spazi liberi :)
    Non è proprio xfetto... ma posso ritenermi soddisfatta... volevo informartene xchè sei stato molto carino a seguire la "nascita" del mio blog.
    Magari spulcerò qualche tuo altro post in futuro... e miterrò aggiornata sulle tue news attraverso Facebook (sono tua fan). Grazie ancora x tutto. Sei stato gentilissimo.
    Un Abbraccio

    RispondiElimina
  19. Per carità...
    E' stato un piacere per me :-)

    RispondiElimina
  20. domanda... come posso cambiare nel tuo js... color: black? Qlsiasi cosa metto e salvo... tipo transparent orange white... mi ritorna black

    RispondiElimina
  21. @soffio di dea
    rispondo cumulativamente a tutte le tue domande
    1)Se vuoi mettere un colore particolare è meglio inserire il codice vale a dire color:#121212, tanto per capirci
    2)Gli effetti Lytebox e Lightbox sono un po' lenti ma questa è proprio la loro caratteristica. Sono affascinanti anche per questo. Più o meno sono equivalenti in quanto a velocità. Personalmente preferisco l'effetto Lytebox perché più versatile (si possono creare anche slideshow)
    Ciao

    RispondiElimina
  22. p.s. purtroppo c'è qui dentro quel black che x quanto metta codici e salvi nn va via... sta nel tuo js che ho caricato sul sito creato su google... e che mi fa apparire una striscia nera sotto la barra del menu... credo. Ti metto la stringa

    jqueryslidemenu ul li a:hover{
    background: black;

    RispondiElimina
  23. Questa è la stringa che colora di nero lo sfondo del menù quando viene puntato con il mouse (hover).
    Il colore dello sfondo in condizioni normali è #414141
    che è un grigio scuro.
    Prova a cambiare quello.
    Ciao

    RispondiElimina
  24. Scusa , ma il menu quando si apre, va "sotto" il primo post, e quindi non si legge!

    RispondiElimina
  25. @mic
    Come puoi vedere nel post che ho usato come test
    http://demo-parsifal32.blogspot.com/2010/02/demo-del-menu-multilivello.html
    il menù multilivello funziona benissimo. Come per altre personalizzazioni di Blogger non è detto però che funzioni con tutti i modelli, ci possono essere delle incompatibilità.
    In questo blog puoi comunque trovare un'ampia scelta di menù.
    Ciao

    RispondiElimina
  26. Effettivamente , solo nella home page il menu scorre sotto il post, non succede se si naviga nel blog...
    grazie come sempre per la risposta!
    buona serata

    RispondiElimina
  27. ciao parsifal .. vorrei creare un menu come il tuo mi indichi dove trovare il post che non sono riuscito a trovarne la descrizione .. ciao grazie

    RispondiElimina
  28. @bul.sa
    il post che ti serve è qui
    http://www.ideepercomputeredinternet.com/2009/10/come-creare-chrome-drop-down-menu-un.html

    RispondiElimina
  29. Carissimo, sto utilizzando da circa tre mesi con molta soddisfazione nel mio blog il menù multivello che ci hai presentato. Da quando ho deciso di avere un mio dominio (attivato eNom con Google)il menù si espande solo come semplice testo in senso verticale e senza più alcun layout.
    Riprestinado il vecchio indirizzo ritorna tutto OK.
    Help
    www.admaiorabike.blogspot.com

    RispondiElimina
  30. @Condottiero
    Mi sa che l'obbiettivo di Blogger sia quello di farci usare esclusivamente i modelli personalizzati di nuova generazione. Nel momento in cui si toglie un widget funzionante non sempre si riesce a reinstallarlo.
    Dopo aver acquistato un dominio personalizzato ho dovuto reinstallare il widget del calendario con archivio. Non mi è stato possibile farlo.
    Per fortuna il mio menù per il momento non ha smesso di funzionare ma ho paura anche a inserire o togliere nuove voci ^_^

    RispondiElimina
  31. Ciao Parsifal32,

    stavo cercando su internet un modo per inserire un menù a tendina nel mio blog, e mi sono imbattuta nel tuo che trovo molto interessante.

    Purtroppo, però, non riesco ad inserire correttamente il menù orizzontale multilivello che tu hai spiegato.
    La prima riga quella della struttura base, è corretta ma i sottomenù non si vedono per niente. Dove ho sbagliarto?

    Il mio blog è:
    http://luanasavastano.blogspot.com/



    Ti ribgrazio anticipatamente,

    ciao Luana

    RispondiElimina
  32. @Luana S.
    Nel tuo blog si vedono addirittura due menù ma non si apre i sottomenù. In questo caso ci sono due spiegazioni
    1)Hai sbagliato qualcosa
    2)Il tuo modello non è compatibile con questo menù
    Credo che la seconda sia la più probabile. Purtroppo in Blogger non tutte le personalizzazioni sono applicabili a tutti i template; inoltre delle volte riescono e poi, inspiegabilmente, non funzionano più. Per fortuna ci sono molte opzioni su cui scegliere. Nel tuo caso per esempio puoi dare un'occhiata a questo post
    http://www.ideepercomputeredinternet.com/2010/01/come-inserire-un-menu-orizzontale.html
    Potresti essere più fortunata ^_^
    Ciao

    RispondiElimina
  33. Ti ringrazio per la pronta risposta. Ho provato ad inserire l'altro codice che che c'è nel post, ma non funziona ugualmente.
    Non riesco a far comparire i sottomenù.
    Pazienza, vorrà dire che per adesso lo terrò così.
    Solo una curiosità, quali sono i template più adatti per il menù multilivello?

    Grazie mille,

    Luana

    RispondiElimina
  34. @Luana S.
    I modelli più adatti erano quelli proposti da Blogger fino a qualche mese fa. Adesso però è cambiato tutto e è stato introdotto il Designer Modelli quindi sarà sempre più complicato fare delle personalizzazioni al di fuori di quelle permesse attraverso il loro strumento.
    Ciao

    RispondiElimina
  35. Rieccomi! :D
    Questo post è chiarissimo! E io che ho dovuto scaricare e caricare i file, tanto male, ho imparato qualcos'altro.
    Dimmi Parsifal, potrei togliere la freccia? Non mi piace molto. :|

    RispondiElimina
  36. @Marguerite N.
    Le due frecce sono importanti per indicare al navigatore che quella determinata voce ha anche dei sottomenù. C'è una freccia orizzontale e una verticale come puoi vedere dalla demo che ho linkato.
    Per toglierle ti posso indicare una via, però non sono sicuro che funzioni.
    Scarica il javascript che si trova a questo indirizzo
    text/javascript" src="http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.js
    rinomina il file con una estensione js o txt. Se lo rinomini txt puoi aprirlo con il blocco note mentre con js devi usare Notepad++ o analogo
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    Potresti provare a togliere gli URL delle frecce. Si tratta infatti solo di immagini. Senza URL dovrebbero sparire però non conosco l'esatto effetto estetico. La freccia orizzontale ha questo URL
    http://eqrc2a.blu.livefilestore.com/y1p4534W7gdQhcKwGIxQH38C7IYeu3HJv6s--oznVOdWz8RWT883i3b5NkMDTcjwWm8H1dMtiRne1mFHRtCT_FHz9_dIGjB2Qjb/freccia-destra.jpg
    mentre quella verticale ha quest'altro
    http://eqrc2a.blu.livefilestore.com/y1pS6EJ-xzCuD-hviZ4ZEeDM8u069baGaErN4jv5PPrV_j4Dnk8b-WPuir2HszNUJORxEQM6rxKDrW8sD53NcRn1siTazDysgbK/freccia-basso.jpg
    Ci lasci solo le virgolette ' '. Questi URL si trovano nelle prime righe dello script.
    Salvi il file e dopo averlo rinominato in .js lo carichi su un hosting tipo Google Sites come illustrato qui
    http://www.ideepercomputeredinternet.com/2010/05/come-caricare-file-javascript-e-css-su.html
    Infine ne acquisisci l'URL e lo sostituisci al file di partenza nel codice.
    Nel caso lo facessi veramente fammi sapere se ti funziona.
    Ciao

    RispondiElimina
  37. Questo procedimento l'ho già provato e non ha funzionato, però voglio riprovarci perché il mio tentativo non era andato a buon fine anche per altri motivi.
    Dopo ci provo e ti faccio sapere.

    RispondiElimina
  38. Niente da fare. Hai presente stamattina quando ti dicevo che, mentre da sola caricavo i files per modificarne l'aspetto, non mi comparivano le frecce? (Vai a capire poi cosa ho sbagliato considerato che io uso MyDataNest) La stessa cosa. Ecco cosa mi appare togliendoli:
    http://img29.imageshack.us/img29/1638/stampmenudrop.jpg

    Qui ho trovato un modo, devo sostituire o aggiungere? Il codice è diverso.
    http://www.dynamicdrive.com/forums/showthread.php?t=55140

    RispondiElimina
  39. @Marguerite N.
    Ottimo! Hai trovato la risposta alla tua domanda. Lascia stare il file javascript ma scarica il file CSS
    http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css
    aprilo con Notepad++ e cerca le due righe di codice dello stile delle immagini delle frecce cioè
    .downarrowclass{ e
    .rightarrowclass{
    prima della parentesi graffa finale } incolla il comando per non visualizzarle cioè
    display:none; come mostrato nella pagina
    http://www.dynamicdrive.com/forums/showthread.php?t=55140 che mi hai indicato.
    Dovrebbe funzionare senz'altro. Sono arrabbiato con me stesso per non averci pensato prima :-(

    RispondiElimina
  40. Il file js ha mandato in confusione anche me, pensavo si dovesse modificare quello quando il css l'ho avuto sotto gli occhi tutto il tempo, compresa la parte di codice finale.
    Comunque funziona! Ho eliminato la freccia verso il basso, non mi piaceva, mentre ho lasciato quella verso destra.

    Non c'è proprio modo di aggiungere questo widget in alto? In poche parole sopra l'header? Sarebbe proprio la perfezione. :D

    RispondiElimina
  41. @Marguerite N.
    Se non riesci a trascinarlo con il mouse su Design > Elementi pagina temo sia veramente difficile...

    RispondiElimina
  42. Eh eh ci abbiamo provato!
    Grazie di tutto Parsifal. :)

    RispondiElimina
  43. ho raggiunto il livello massimo di disperazione. Sto preparando un nuovo template a partire dal designer di modelli di blogger, ma il codice per il menu non funziona. I sottomenu non si aprono...ho provato con tutti i template predefiniti in un blog "vergine", senza alcun widget o post, quindi escludo problemi di "interferenze" con altri elementi. Ho cercato altri codici in rete ma nessuno che mi funzioni...possibile che da quando c'è il nuovo designer di modelli nessuno abbia creato un nuovo menu? non so più dove sbattere la testa!

    RispondiElimina
  44. @filokalos
    Quelli di Blogger fanno di tutto per fare in modo che si utilizzi solo i loro modelli standard con i widget ufficiali e niente più; la tendenza è questa...

    RispondiElimina
  45. però mi sembra strano che da quando c'è il nuovo designer di modelli nessuno abbia trovato un'alternativa...ieri ho cercato per mezza giornata e niente. Tu non hai idea di dove potrei trovare qualcosa?

    RispondiElimina
  46. come non detto! finalmente ne ho trovato uno che funziona anche con il nuovo designer di modelli! te lo segnalo perché magari vuoi darci un occhio, o potrebbe essere utile a qualcun altro col mio problema...ieri stavo impazzendo!
    eccolo qui

    RispondiElimina
  47. ritiro quello che ho detto: funziona in chrome ma non in i.e. Aaaaargh!

    RispondiElimina
  48. @filokalos
    Con I.E. non funziona mai niente...
    I menù li ho trovati tutti su Dynamic Drive
    http://www.dynamicdrive.com/
    Ce ne sono moltissimi. Quelli che ho presentato mi sembravano i migliori. Il fatto è che gli script jQuery sembra che non siano in sintonia con il Designer Modelli

    RispondiElimina
  49. con il designer di modelli e chrome funziona, ma non me ne faccio niente visto che metà dei miei visitatori utilizza IE. UFFFFFA!
    scusa se ti ho intasato di commenti!

    RispondiElimina
  50. ho un problema davvero fastidioso, creo il sottomenu con il menu esistente del template ma non funziona... perchè?

    RispondiElimina
  51. se uso il tuo metodo, mi blocca gli slider delle notizie... hai una soluzione?

    RispondiElimina
  52. @Rorschach
    Arguisco dalle tue spiegazioni che hai un modello pieno di script, quindi mi sa che c'è poco da fare.
    Come consiglio ti posso dire che quando si sceglie un template o si sceglie semplice semplice per poi aggiungere tutte le personalizzazioni oppure si sceglie già molto sofisticato, ma con la consapevolezza che difficilmente potrà essere modificato.
    Ciao

    RispondiElimina
  53. ho visto che lo stesso autore del mio template ne ha creato altri simili a quello che ho scelto dove il menu a scomparsa funziona...

    RispondiElimina
  54. @Rorschach
    Allora non ci sono problemi, usa uno di quelli :)

    RispondiElimina
  55. ehm sono affezzionato alla "grafica" del mio... ho provato a sbirciare il codice di quello che ha il menu a scomparsa e provandolo da me non funzionava... non c'è un modo di usare la tua guida senza "bloccare" lo slide delle featured news?

    RispondiElimina
  56. @Rorschach
    Quello che c'è in questo sito lo puoi trovare nelle voci del menù, nelle etichette o con la ricerca ma per i problemi di incompatibilità c'è poco da fare. Si può solo provare a eliminare qualche widget a rotazione per vedere se è quello che la provoca.

    RispondiElimina
  57. Ho un problema:
    Quando inserisco il widget html-javascript e lo inserisco sotto l'intestazione me lo conta come fosse un widget di "pagine" e quindi non mi fa aprire i multilivelli!
    Ho provato a cambiare i modelli ma non cambia niente!
    Come posso fare???

    RispondiElimina
  58. Ottimo!!Ma il colore grigio/nero si puo cambiare??se è si come??

    RispondiElimina
  59. @solofilm C'è scritto nell'ultima parte del post. Bisogna modificare questo file
    http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css

    RispondiElimina
  60. Ciao Ernesto anche questo genere di menù potrebbe interessarmi ma purtroppo anche qui ci sono problemi di visualizzazione creati forse da un modello non adeguato esiste una soluzione? grazie per la pazienza complimenti per il sito

    RispondiElimina
  61. Questo modello è molto particolare, estratto da Wordpress quindi se non funziona lascia perdere

    RispondiElimina
  62. Ciao Parsifal, continua così contenuti aggiornati, funzionanti e spiegati a prova di bambino veramente. Complimenti :)

    Ciao a tutti, ho deciso di inserire anche io questo menu nel mio blog.
    Come molti di voi ho avuto molti problemi perchè non mi comparivano i sottomenu che andavano a finire sotto il contenuto del post o della sidebar.
    Bene quando stavo per toglierlo e cambiarlo con un altro ho avuto un illuminazione.

    Vi spiego per passi.
    Dopo aver installato il menu come descritto qui sopra andate su design->modifica html cercate #content-wrapper e inserite in fondo la scritta z-index:10;
    Dovreste avere una cosa simile a questa:

    #content-wrapper {
    width: 978px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
    background: $contentbgColor;
    border: 1px solid $contentBorderColor;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    z-index:10;
    }

    oltre ad inserire z-index:10; controllate anche che ci sia la riga position: relative; altrimenti aggiungetela

    poi andate su design->elementi pagina aprire il widget html/javascript dove avete inserito il menu, la prima riga sarà:

    div id="myslidemenu" class="jqueryslidemenu"

    sostituitela con questa

    div id="myslidemenu" class="jqueryslidemenu" style="position:relative; z-index:20;"

    salvate andate a vedere il vostro modello e tutto dovrebbe essere andato a posto. Come potete vedere dal mio blog:

    L'idea dello z-index è quello che
    l'elemento in primo piano sarà quello con uno z-index più alto in questo caso il nostro menu.

    Spero di facilitare la vita a molti di voi :) ciao ciao

    RispondiElimina
  63. @maurinho
    Nelle Linee guida su come utilizzare questo blog
    http://www.ideepercomputeredinternet.com/2011/06/linee-guida-su-come-usare-questo-blog.html
    avevo raccomandato di non inserire link attivi perché altrimenti li avrei dovuti cancellare. Farlo con il tuo però mi dispiace visto che è particolarmente interessante. Però non lo fare più :)
    Sull'utilizzo di z-index ho da poco pubblicato un post
    http://www.ideepercomputeredinternet.com/2011/06/come-posizionare-e-stabilire-l-di.html
    proprio per affrontare problemi del tipo che hai descritto.

    RispondiElimina
  64. scusami parsifal volevo solo essere utile perchè avevo letto commenti sopra di gente che come me aveva avuto questo stesso problema.

    Se può essere utile inserisci direttamente il metodo nel tuo post qua sopra e cancella pure il commento no problem :)

    RispondiElimina
  65. Non ci riuscirò mai!! Io ho un problema:
    ecco il problema
    come vedi ho ben 4 argomenti che sono da inserire tutti nello stesso macroargomento 11 Settembre... come faccio?

    RispondiElimina
  66. @Nico Forconi
    Ti invito nuovamente a non mettere link attivi, basta incollare l'URL che la pagina la trovo lo stesso.
    Se intendi inserire una voce principale con quattro voci secondarie metti una etichetta 11 settembre e linki la pagina delle etichette. Nel livello inferiore metti i singoli post. In Blogger però non si possono nidificare le etichette come su Wordpress quindi non si possono creare sottocategorie.

    RispondiElimina
  67. Ciao, ho un problema per mettere un menu orizzontale che passandoci con il mouse apra una tendina verso il basso. Ho provato quasi tutti i menu che hai scritto sul tuo sito e non me n'è funzionato nemmeno uno :(

    Per es. in questo blog di prova non ho messo nessun script ecc, credo di aver seguito i passaggi in modo corretto, ma non si apre il menu:

    http://blogdinoire.blogspot.com/

    Nell'altro menu invece sembrava funzionare ma, come è successo ad altri, il menu si apriva molto più in basso, quasi ad inizio post..

    C'è una soluzione per mettere un menu orizzontale a tendina? grazie

    RispondiElimina
  68. @kiya
    Eppure qualche tempo fa funzionavano tutti :((
    Prova a caricare i javascript su DropBox invece che su Google Sites come ho fatto io ma il problema sono i nuovi modelli. Puoi provare questa tecnica
    http://www.ideepercomputeredinternet.com/2011/04/come-installare-i-menu-anche-nei.html
    però devi farlo prima in un blog di prova.

    RispondiElimina
  69. Grazie mille! ho seguito le istruzioni del tuo link e almeno il menu multi-livello funziona finalmente :D

    Ora provo anche gli altri..grazie!

    RispondiElimina
  70. Ho inserito con successo questo menù nel mio blog (ricorrendo alla correzione z-index), ma su IE non funziona. Succede anche a voi?

    RispondiElimina
  71. @Kokeshimeie
    Quando l'ho installato funzionava anche con IE adesso invece ho visto la pagina di demo e non si aprono le voci secondarie con quel browser

    RispondiElimina
  72. Ciao Ernesto,
    da qualche giorno non visualizzo più le immagini delle freccette (basso, destra). Volevo sapere se hai le immagini originali così da caricarle su un altro hosting. Grazie

    RispondiElimina
  73. Le puoi scaricare da qui
    http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
    cliccando sul destro del mouse e scegliendo salva immagine con nome

    RispondiElimina
  74. Non capisco perchè non scendono le tendine con le voci. Mi puoi dare un occhiata:
    http://mikethecrow.blogspot.com/

    RispondiElimina
  75. Credo che devi mettere gli url nei sottomenu

    RispondiElimina
  76. con chrome non funzionano le sottosezioni.
    L'unico menu che mi piaceva

    RispondiElimina
  77. Ciao.
    Evidentemente il menù che hai presentato in questo post, visto la mole di commenti, è piaciuto molto, ma presenta anche parecchie problematiche.
    Ti presento la mia.
    Se posiziono il widget sotto l'intestazione "il soffietto" non si apre,
    mentre se lo metto sotto i post funziona perfettamente .. come mai?

    RispondiElimina
    Risposte
    1. @ pier
      Su Blogger siamo continuamente alle prese con queste problematiche, non è che su Wordpress sia tutto rose e fiori :)
      Prova quest'altro menù multilivello che dà meno problemi
      http://www.ideepercomputeredinternet.com/2011/02/menu-orizzontale-su-piu-livelli-per.html

      Elimina
    2. Grazie per la celere risposta.
      Quello che mi hai segnalato mi sembra un pò più complesso, ma ci provo.

      P.S. Possibile che i cervedlloni di Google non riescano a proporre un widget "etichette" con la possibilità di creare delle sotto-etichette?

      Elimina
  78. Forse avevo postato nel posto sbagliato
    Bello. Ho solo il problema che i submenù vengono nascosti dall'header che sta al di sotto. Si può risolvere?

    RispondiElimina
    Risposte
    1. @CarloDApuzzo
      Si può risolvere però non è una cosa semplicissima. Devi inserire il tag z-index
      http://www.ideepercomputeredinternet.com/2011/06/come-posizionare-e-stabilire-l-di.html
      modificando il file
      http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css
      Se non hai una certa pratica forse è meglio che tu metta il menù sotto l'header

      Elimina
    2. Grazie per la risposta. il problema che sotto l'header i sottomenù non si vedono, almeno nel blog di prova. Proverò a dare uno sguardo al link che hai indicato

      Elimina
    3. @ Carlo D'Apuzzo
      Prova con quest'altro menù
      http://www.ideepercomputeredinternet.com/2011/02/menu-orizzontale-su-piu-livelli-per.html
      e con questo sistema di inserimento
      http://www.ideepercomputeredinternet.com/2012/09/blogger-menu-header.html

      Elimina
    4. Stupendo soprattutto me stesso ma ci sono riuscito. Ancora grazie

      Elimina
  79. questo stesso codice può essere utilizzato se per creare i menu ho utilizzato il widget delle pagine?

    RispondiElimina
    Risposte
    1. @# Sì, si possono anche inserire questo menù insieme a quello ufficiale delle pagine statiche

      Elimina
  80. Salve, volevo segnalare un malfunzionamento di questo menù da un paio di giorni: non si aprono i sottomenù... Esiste qualche soluzione? Grazie :)

    RispondiElimina
    Risposte
    1. @# Non funziona più neppure la Demo :(
      Prova a scaricare questi due file
      http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css
      http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.js
      e a caricarli su DropBox
      Poi prova a aggiornare la versione di JQuery alla 1.9.2
      http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html

      Elimina
    2. grazie.. mi hanno bloccato per la seconda volta in 1 settimana il blog (dopo 1 anno ha funzionato perfettamente)... appena me lo sbloccano faccio le prove che mi hai suggerito.. e comunicherò l'esito..

      Elimina
    3. ah, la JQuery è la 1.9.1 ... ma esiste anche la 2.0.0 ... quale consigli di usare? grazie

      Elimina
    4. @# La 2.0.0 non te la consiglio per il momento perché l'ho provata in una paio di widget e ancora dà problemi. La penultima rilasciata è la 1.9.2 che è più affidabile

      Elimina
    5. ho provato ma non va... qualche altro suggerimento per il menu? grazie

      Elimina
    6. @# Non mi viene in mente nulla di utile. Purtroppo non ci è dato sapere perché non funziona più. In tal caso avremmo potuto prendere delle contromisure ...

      Elimina
    7. Questo commento è stato eliminato dall'autore.

      Elimina
    8. ho trovato il problema... hanno modificato il file "jqueryslidemenu.js"...
      dai un'occhiata qui:
      http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
      (prima di caricare il nuovo file, devi inserirci i link per le frecce...)

      Elimina
    9. @# Guarda che le immagini delle frecce le avevo già caricate nel file poi messo su Google Sites altrimenti non avrebbe funzionato. Si vede non si vedono più le immagini che avevo messo io per una qualche ragione. Le avevo messe su SkyDrive. La prima è qui
      http://hgafyw.blu.livefilestore.com/y2p-UG-Pg8YZ3WMw4YX4lR9mOlXOit4pDKbmdFah8BlzT2OpRBkRCOB-O1O46xDi3GAKaK4DIj6uEk2B416PcMtrtzfkPn-qMxAdR2mX0Z6i2J4fhMa_4hEXKileKmWGqo6/freccia-basso.jpg
      e la seconda è qui
      http://hgafyw.blu.livefilestore.com/y2pMf1DVjFXHU6qUdiXfd1lSSKUVQgzjWWCps4JkWI8vZk_mw9OsbUDQ6Uep3IhGr64AoBn2eyK6fFc_YMJ7wLNTvTNe9CiPl9D5GhZJKCNljE4KfOYNU_6iFG_5O7uljyW/freccia-destra.jpg
      Su SkyDrive non si può mai mettere nulla :(

      Elimina
    10. non mi sono spiegato bene :(
      nella pagina che ti ho "linkato" devi prendere il nuovo file "jqueryslidemenu.js" (dove all'interno ci metti i link delle frecce che mi hai postato, utilizzando notepad++) e lo carichi dove preferisci... questo nuovo file fa funzionare di nuovo il menu... ;)

      Elimina
    11. @# Guarda che ti eri spiegato benissimo :)
      e avevo capito. Solo non mi capacitavo perché le due immagini che avevo postato su SkyDrive non funzionassero più.

      Elimina
    12. @# Ho caricato le immagini su Picasa e modificato il codice. Grazie dell'aiuto.

      Elimina

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