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
e, immediatamente sopra, incolliamo il seguente codice</head>
<!--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/-->
<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>
<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>
<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<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>
<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>
<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:
- Il colore di sfondo che di default è #414141;
- La grandezza dei caratteri (13 pixel) e la famiglia di font
- 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 -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.
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@astasia
RispondiEliminaLe 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
ciao parsifal,
RispondiEliminaho 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
@occhioalfolletto
RispondiEliminaLa 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
No, <a href="http://blogprovafolletto.blogspot.com/>questo </a>è il mio blog di prova e come vedi non è la sidebar ma quello spazio.
RispondiEliminaTi 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.
No, questo è il mio blog di prova e come vedi non è la sidebar ma quello spazio.
RispondiEliminaTi 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/
Anche se credo che la struttura del template non è compatibile :(
RispondiElimina@occhioalfolletto
RispondiEliminaE' 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
Si avevo già provato a mettere il widget spora la sezione post e lì funziona egregiamente.
RispondiEliminaHai altre idee se questo menu multilivello non funzionerebbe sul mio template..? Magari dei menu con un livello soltanto..
Grazie sempre
@occhioalfolletto
RispondiEliminaTi 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
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.
RispondiEliminaIl 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...
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...
RispondiEliminaUn incubo!!!
Grazie!!!
Ciao
Astasia
@astasia
RispondiEliminaAttualmente è 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
problema:
RispondiEliminaho 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
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@soffio di dea
RispondiEliminaHai 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 :-)
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
RispondiEliminariguardo 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
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 :)
RispondiEliminaNon è 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
Per carità...
RispondiEliminaE' stato un piacere per me :-)
domanda... come posso cambiare nel tuo js... color: black? Qlsiasi cosa metto e salvo... tipo transparent orange white... mi ritorna black
RispondiElimina@soffio di dea
RispondiEliminarispondo 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
ok grazie x le tue risposte :)
RispondiEliminap.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
RispondiEliminajqueryslidemenu ul li a:hover{
background: black;
Questa è la stringa che colora di nero lo sfondo del menù quando viene puntato con il mouse (hover).
RispondiEliminaIl colore dello sfondo in condizioni normali è #414141
che è un grigio scuro.
Prova a cambiare quello.
Ciao
provato... riproverò :) grazie
RispondiEliminaScusa , ma il menu quando si apre, va "sotto" il primo post, e quindi non si legge!
RispondiElimina@mic
RispondiEliminaCome 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
Effettivamente , solo nella home page il menu scorre sotto il post, non succede se si naviga nel blog...
RispondiEliminagrazie come sempre per la risposta!
buona serata
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@bul.sa
RispondiEliminail post che ti serve è qui
http://www.ideepercomputeredinternet.com/2009/10/come-creare-chrome-drop-down-menu-un.html
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.
RispondiEliminaRiprestinado il vecchio indirizzo ritorna tutto OK.
Help
www.admaiorabike.blogspot.com
@Condottiero
RispondiEliminaMi 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 ^_^
Ciao Parsifal32,
RispondiEliminastavo 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
@Luana S.
RispondiEliminaNel 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
Ti ringrazio per la pronta risposta. Ho provato ad inserire l'altro codice che che c'è nel post, ma non funziona ugualmente.
RispondiEliminaNon 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
@Luana S.
RispondiEliminaI 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
Rieccomi! :D
RispondiEliminaQuesto 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. :|
@Marguerite N.
RispondiEliminaLe 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
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.
RispondiEliminaDopo ci provo e ti faccio sapere.
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:
RispondiEliminahttp://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
@Marguerite N.
RispondiEliminaOttimo! 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 :-(
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.
RispondiEliminaComunque 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
@Marguerite N.
RispondiEliminaSe non riesci a trascinarlo con il mouse su Design > Elementi pagina temo sia veramente difficile...
Eh eh ci abbiamo provato!
RispondiEliminaGrazie di tutto Parsifal. :)
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@filokalos
RispondiEliminaQuelli 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...
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?
RispondiEliminacome 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!
RispondiEliminaeccolo qui
ritiro quello che ho detto: funziona in chrome ma non in i.e. Aaaaargh!
RispondiElimina@filokalos
RispondiEliminaCon 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
con il designer di modelli e chrome funziona, ma non me ne faccio niente visto che metà dei miei visitatori utilizza IE. UFFFFFA!
RispondiEliminascusa se ti ho intasato di commenti!
ho un problema davvero fastidioso, creo il sottomenu con il menu esistente del template ma non funziona... perchè?
RispondiEliminase uso il tuo metodo, mi blocca gli slider delle notizie... hai una soluzione?
RispondiElimina@Rorschach
RispondiEliminaArguisco 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
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@Rorschach
RispondiEliminaAllora non ci sono problemi, usa uno di quelli :)
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@Rorschach
RispondiEliminaQuello 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.
Ho un problema:
RispondiEliminaQuando 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???
Ottimo!!Ma il colore grigio/nero si puo cambiare??se è si come??
RispondiElimina@solofilm C'è scritto nell'ultima parte del post. Bisogna modificare questo file
RispondiEliminahttp://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css
Grazie *-*
RispondiEliminaCiao 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
RispondiEliminaQuesto modello è molto particolare, estratto da Wordpress quindi se non funziona lascia perdere
RispondiEliminaCiao Parsifal, continua così contenuti aggiornati, funzionanti e spiegati a prova di bambino veramente. Complimenti :)
RispondiEliminaCiao 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
@maurinho
RispondiEliminaNelle 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.
scusami parsifal volevo solo essere utile perchè avevo letto commenti sopra di gente che come me aveva avuto questo stesso problema.
RispondiEliminaSe può essere utile inserisci direttamente il metodo nel tuo post qua sopra e cancella pure il commento no problem :)
Non ci riuscirò mai!! Io ho un problema:
RispondiEliminaecco il problema
come vedi ho ben 4 argomenti che sono da inserire tutti nello stesso macroargomento 11 Settembre... come faccio?
@Nico Forconi
RispondiEliminaTi 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.
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 :(
RispondiEliminaPer 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
@kiya
RispondiEliminaEppure 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.
Grazie mille! ho seguito le istruzioni del tuo link e almeno il menu multi-livello funziona finalmente :D
RispondiEliminaOra provo anche gli altri..grazie!
Ho inserito con successo questo menù nel mio blog (ricorrendo alla correzione z-index), ma su IE non funziona. Succede anche a voi?
RispondiElimina@Kokeshimeie
RispondiEliminaQuando 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
Ciao Ernesto,
RispondiEliminada 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
Le puoi scaricare da qui
RispondiEliminahttp://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
cliccando sul destro del mouse e scegliendo salva immagine con nome
Non capisco perchè non scendono le tendine con le voci. Mi puoi dare un occhiata:
RispondiEliminahttp://mikethecrow.blogspot.com/
Credo che devi mettere gli url nei sottomenu
RispondiEliminacon chrome non funzionano le sottosezioni.
RispondiEliminaL'unico menu che mi piaceva
Ciao.
RispondiEliminaEvidentemente 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?
@ pier
EliminaSu 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
Grazie per la celere risposta.
EliminaQuello 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?
Forse avevo postato nel posto sbagliato
RispondiEliminaBello. Ho solo il problema che i submenù vengono nascosti dall'header che sta al di sotto. Si può risolvere?
@CarloDApuzzo
EliminaSi 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
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@ Carlo D'Apuzzo
EliminaProva 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
Stupendo soprattutto me stesso ma ci sono riuscito. Ancora grazie
Eliminaquesto stesso codice può essere utilizzato se per creare i menu ho utilizzato il widget delle pagine?
RispondiElimina@# Sì, si possono anche inserire questo menù insieme a quello ufficiale delle pagine statiche
EliminaSalve, volevo segnalare un malfunzionamento di questo menù da un paio di giorni: non si aprono i sottomenù... Esiste qualche soluzione? Grazie :)
RispondiElimina@# Non funziona più neppure la Demo :(
EliminaProva 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
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..
Eliminaah, la JQuery è la 1.9.1 ... ma esiste anche la 2.0.0 ... quale consigli di usare? grazie
Elimina@# 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
Eliminava bene, grazie :)
Eliminaho provato ma non va... qualche altro suggerimento per il menu? grazie
Elimina@# 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 ...
EliminaQuesto commento è stato eliminato dall'autore.
Eliminaho trovato il problema... hanno modificato il file "jqueryslidemenu.js"...
Eliminadai 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...)
@# 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
Eliminahttp://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 :(
non mi sono spiegato bene :(
Eliminanella 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... ;)
@# Guarda che ti eri spiegato benissimo :)
Eliminae avevo capito. Solo non mi capacitavo perché le due immagini che avevo postato su SkyDrive non funzionassero più.
@# Ho caricato le immagini su Picasa e modificato il codice. Grazie dell'aiuto.
Eliminaè sempre un piacere ;)
Elimina