Menu per Blogger con sottosezioni senza javascript


Non tutti sanno che su Blogger è possibile inserire un menu diverso da quello delle pagine statiche, ad esempio personalmente preferisco utilizzare su Scuolissima il menu quello sotto forma di HTML senza l'utilizzo di Javascript che rallentano il blog e che la maggior parte delle volte, col passar del tempo hanno problemi anche con altri codici Javascript.


Il menù di cui tratteremo questa volta oltre alla solita funzione delle sezioni ha anche la capacità di mostrare le sottosezioni, in questo modo si viene a creare un vero menù a discesa o a tendina.

Andate su Layout > Aggiungi un gadget > HTML/Javascript ed incollate il codice della prima tabella, poi trascinatelo sotto al widget dell'intestazione:

<div id='Scuolimenu'>
      <ul id='Scuol'>
        <li>
          <a href='#'>Home</a>
          <ul>
         <li><a href='#'>About</a></li>
                <li><a href='#'>Contattami</a></li>
                <li><a href='#'>Privacy</a></li>
                <li><a href='#'>Facebook</a></li>
                <li><a href='#'>Twitter</a></li>
              </ul>
        </li>  
        <li>
          <a href='#'>Voce 1</a>
          <ul>
                <li><a href='#'>Voce 1.1</a></li>
                <li><a href='#'>Voce 1.2</a></li>
                <li><a href='#'>Voce 1.3</a></li>
              </ul>
       </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>
              </ul>
        </li>
        <li>
          <a href='#'>Voce 3</a>
          <ul>
                <li><a href='#'>Voce 3.1</a></li>
                <li><a href='#'>Voce 3.2</a></li>
                <li><a href='#'>Voce 3.3</a></li>
              </ul>
        </li>
        <li>
          <a href='#'>Voce 4</a>
          <ul>
                <li><a href='#'>Voce 4.1</a></li>
                <li><a href='#'>Voce 4.2</a></li>
                <li><a href='#'>Voce 4.3</a></li>
                <li><a href='#'>Voce 4.4</a></li>
                <li><a href='#'>Voce 4.5</a></li>
                <li><a href='#'>Voce 4.6</a></li>
                <li><a href='#'>Voce 4.7</a></li>
              </ul>
        </li>
      </ul>
    </div>

Avete notato che dopo href è presente il cancelletto (#)? Sostituitelo con il link di un post che vorreste che appaia una volta che venga cliccato ed ovviamente sostituite la parola Voce con qualcosa di più semplice consono in base al link inserito. Le sezioni o sottosezioni in più possono essere rimosse, ricordatevi però che la lista delle sottosezioni debba iniziare con <ul> e finire con </ul>, altrimenti il codice apparirà un disastro.

Adesso salvate e andate a guardare il vostro blog. Il menu avrà un aspetto inguardabile appunto perché manca il codice css che dovrete andare ad incollare. Salvate anche il template nel caso in cui facciate qualche cazzata col codice così potrete rimetterlo in sesto in pochi secondi.
Recatevi quindi su Modello > Modifica HTML, fate apparire la casella di ricerca del modello cliccando Ctrl + F, cercate il codice </head>, poi premete invio e lo troverete evidenziato nel modello, subito prima di questo codice incollate il css inserito nella tabella qui sottostante:

<!-- Menù Orizzontale con Sottosezioni Inizio -->
<style type="text/css">
#Scuolimenu {
    background: #221c1c !important;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #a70100;
        height:35px;
}
#Scuol {
    margin: 0;
    padding: 0;
}
#Scuol ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#Scuol li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #444;
        border-right:1px solid #444;
        height:35px;
}
#Scuol li a, #Scuol li a:link, #Scuol li a:visited {
    color: #FFF;
    display: block;
    font:normal 12px Trebuchet, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#Scuol li a:hover, #Scuol li a:active {
    background: #f20100;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
}
#Scuol li {
    float: left;
    padding: 0;
}
#Scuol li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 140px;
    margin: 0;
    padding: 0;
}
#Scuol li ul a {
    width: 140px;
}
#Scuol li ul ul {
    margin: -25px 0 0 161px;
}
#Scuol li:hover ul ul, #Scuol li:hover ul ul ul, #Scuol li.sfhover ul ul, #Scuol li.sfhover ul ul ul {
    left: -999em;
}
#Scuol li:hover ul, #Scuol li li:hover ul, #Scuol li li li:hover ul, #Scuol li.sfhover ul, #Scuol li li.sfhover ul, #Scuol li li li.sfhover ul {
    left: auto;
}
#Scuol li:hover, #Scuol li.sfhover {
    position: static;
}
#Scuol li li a, #Scuol li li a:link, #Scuol li li a:visited {
    background: #ff3837;
    width: 140px;
    color: #FFF;
    display: block;
    font:normal 12px Trebuchet, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #444;
}
#Scuol li li a:hover, #Scuol li li a:active {
    background: #473b3b;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
</style>
<!-- Menù orizzontale con Sottosezioni Fine -->

Come ogni CSS, questo può essere modificato a proprio piacimento. Impostate la larghezza che volete, il font del carattere e il colore che più vi piace e che si adatta anche allo sfondo e alla tematica del vostro blog. In rosso sono selezionati i punti in cui potrete iniziare con le modifiche.

#221c1c è il colore di background del menù principale.
#f20100 è il colore di background quando il mouse passa su una scheda.
#ff3837 è il colore del menù quando il cursore passa su una voce principale.
#473b3b è il colore di sfondo quando si passa sopra a una voce secondaria con il mouse.
#FFF cioè #FFFFFF è il colore del testo delle varie voci.
#444 cioè #444444 è il colore del bordo.
font:normal 12px Trebuchet, sans-serif; serve per modificare Font e Dimensione dei caratteri.

Su Chrome e Firefox questo menù funziona perfettamente, mentre su Internet Explorer con l'attuale versione potrebbe non funzionare, per renderlo funzionante anche su Internet Explorer dovete eseguire l'ottimizzazione del modello per tutti i tipi di browser come spiegato in un articolo precedente.

LEGGI ANCHE: Menù multilivello (consigliato)
LEGGI ANCHE: Come creare menù espandibile


94 commenti :

  1. a me l'effetto tendina non viene

    RispondiElimina
    Risposte
    1. Su tutti i modelli classici di Blogger funziona al 100%, dato che lo utilizzo anche io su un altro blog; controlla bene dove hai posizionato il codice CSS. Se usi dei temi diversi 'potrebbe' non funzionare perché chi realizza dei temi anche se belli si dimentica sempre un pezzo di codice.
      Comunque non so' se stai ancora provando questo codice ma io vedo che sotto About ti escono fuori le due sottosezioni: Chi è Occhi ovunque e Chi è Valentina. :)

      Elimina
  2. Ciao,
    Grazie per il codice, ha funzionato e sono felice :) Ancora non ho finito tutti i cambiamenti però va alla grande.
    Una domanda: Come si fa a mettere ad una sottovoce più di un link? cosa metto tra questi due? ho provato la virgola però non funziona. Grazie!

    RispondiElimina
  3. Ciao, dunque premetto che da neofita inizio a crearmi la struttura del blog che richiede un menù di pagine con sottocategorie a tendina.. e qui sbang!!
    x fortuna ho trovato il tuo blog e mi piace la chiara spiegazione. ho inserito il codice html, modificandolo secondo le mie esigenze. e ok . credo almeno mi compare la traccia delle schede incasinate Come da indicazione ma in corretta sequenza.
    ora salvato modello, eseguito modifiche nel secondo codice , CSS, cambiato i colori modificato un carattere di testo delle schede. Anteprima: ??? nulla :(
    puoi salvarmi?

    RispondiElimina
    Risposte
    1. Hai provato a salvare il modello e vederlo senza usare l'Anteprima? Incollando il css prima della riga "/head" dovevano notarsi delle differenze, l'ho provato proprio adesso e tutt'ora funziona. Può anche darsi che si adatta solo coi temi originali di Blogger e non quelli scaricati da altre parti. Posso provare ad aiutarti ma scrivimi per email i dati per accedere/aggiungermi al blog.

      Elimina
  4. Ciao, non riesco a capire come cambiare la grandezza e il carattere del menù, inoltre se dopo vado a vedere qualche pagina mi dice che non esiste, puoi aiutarmi? ( http://mastericette.blogspot.it/p/ricette se vuoi dare un occhiata per capire meglio il mio problema, grazie in anticipo

    RispondiElimina
    Risposte
    1. Adesso li ho evidenziati nel codice: per la dimensione devi aumentare 12px, per il font devi sostituire Trebuchet. Per i link che non ti funzionano dipende tutto da te perché le pagine le devi prima creare e poi devi inserire il link di esse nell'apposito codice HTML.

      Elimina
  5. ciao scusami è possibile eliminare i trattini che separano le voci nel menu a tendina?

    RispondiElimina
    Risposte
    1. Per togliere i trattini delle sottosezioni devi eliminare questa riga dal secondo codice css:
      border-bottom:1px dotted #444;
      però così facendo anziché i trattini appaiono degli spazietti tipici del template Blogger.

      Elimina
  6. Devo dire che per la prima volta nella mia vita sono riuscita a fare questo benedetto menu, grazie a te. Sono lì da agosto del 2013 che combatto, e nulla. Piacere di averti conosciuto, e ora posso dire che il mio blog ha un menu a tendina. Grazieeeee mille.
    PS: una domanda: ma come faccio a cambiare il colore del menu? lo vorrei bianco è possibile? grazie di già!

    RispondiElimina
    Risposte
    1. Hai ragione, gli altri tipi di menù anche se possono sembrare più belli hanno sempre qualche problemino di troppo. Per cambiare il colore del menù devi sostituire a piacimento i codici evidenziati in rosso usando il codice dei colori esadecimali. Ti lascio il link su come trovarli:
      http://www.scuolissima.com/2013/11/generatore-colori-esadecimali-online.html

      Elimina
    2. uuu grazie mille. Cmq sono Raquel, ma sto usando il profilo del mio compagno. ^_^ e mentre facevo la modifica, mi andava di congratularmi con te. Sei stato bravissimo e super simpatico a rispondermi. Grazie ancora, e ancora complimenti. Alla prossima, Raquel.

      Elimina
  7. ciao scusa l ignoranza ma il codice css è quello in rosso?

    RispondiElimina
  8. vedo i titoli facebook ecc in scala metto il codice ma non cambia non so come fare

    RispondiElimina
    Risposte
    1. il codice è tutto quello che c'è nel riquadro, poi se vuoi personalizzare i colori devi andare a modificare quelli in rosso. Va incollato come già detto nel testo appena prima di /Head (quello con lo slash). Molto probabilmente sbagli ad incollarlo.

      Elimina
  9. Ciao, grazie per questa guida!!! Ho solo un problema, non riesco ad eliminare lo spazio tra il menù principale e le varie tendine... http://archenjoy.blogspot.it/# risulta difficile selezionare le scritte delle tendine, a meno che non si sposti il mouse molto velocemente su queste (non so se mi sono spiegata). Come posso risolverlo?
    Grazie!

    RispondiElimina
    Risposte
    1. Si l'ho visto, però ho provato sul mio blog di prova ad usare lo stesso modello che hai tu ed a me funziona bene. Ho guardato anche il tuo codice HTML ed a prima vista sembra OK, comunque ci sono delle stranezze su Blogger ed a volte anche su modelli identici, come in questo caso, in uno funziona e nell'altro no. L'unica possibilità che hai è quella di cambiare modello ed usare quello 'Semplice', però prima salvati il Modello così puoi ritornare a quello vecchio rapidamente.

      Elimina
  10. Ciao veramente utile questo post grazie mille! Volevo sapere come posso centrare il menu invece di averlo giustificato a sinistra.
    Il sito è www.elyellafashion.com
    Ancora veramente complimentoni

    RispondiElimina
    Risposte
    1. Nel secondo codice, dentro le parenti graffe che si trovano dopo #Scuolimenu devi inserire questo codice:
      margin-left:30px;
      più incrementi il numero che in questo caso è 30 e più si sposta a sinistra.

      Elimina
    2. è quello nella terza riga vero? ho provato ma non funziona :(

      Elimina
  11. sono riuscita a spostarlo ma mi rimane la riga grigia attaccata e le sottosezioni appaiono spostate (se vuoi controllare www.elyellafashion.com) Se potessi darmi qualche altra dritta.. grazie dell'aiuto

    RispondiElimina
    Risposte
    1. su Blogger bisogna sapersi adattare: se spostandolo si spostano anche le sottosezioni allora lascialo com'era all'inizio. Ieri ti funzionava bene.

      Elimina
  12. le voci x.2 e x.3 hanno un bordino bianco a sinistra che la voce x.1 non ha: si potrebbe eliminare questo bordino?
    grazie! ;)

    RispondiElimina
    Risposte
    1. penso che la soluzione sia la stessa che ho dato in un precedente commento a Riccardo Cenci. Verifica se è di tuo gradimento :)

      Elimina
    2. forse mi sono espresso male: non intendevo la linea orizzontale a puntini (border-bottom) ma la linea verticale a sinistra di voce 3.2 e 3.3 :)

      Elimina
    3. in effetti sta meglio senza, elimina questa parte di codice:
      border-left:1px solid #444;

      Elimina
    4. purtroppo il risultato non cambia :(

      Elimina
    5. più che un problema di bordo credo sia un problema di padding visto che la linea bianca è interna al bordo grigio scuro (#444)... ma quale padding?

      Elimina
    6. si scusa, avevo provato solo con la prima sezione (Home) e li non mi appare questa striscia bianca che penso sia un separatore che aggiunge Blogger stesso, anche se elimini tutti gli #FFF e modifichi i Padding (che servono per distanziare) non cambierà nulla. Se ci riesci sei un mito ^^

      Elimina
  13. Ciao! Quale parte del CSS dovrei modificare per aumentare la larghezza dei sottomenù?
    Mi spiego meglio: una delle voci del sottomenù è troppo lunga e viene troncata; come posso risolvere?
    Grazie ;)

    RispondiElimina
    Risposte
    1. Prova a sostituire tutti i "width: 140px;" mettendo al posto di 140 un numero più alto tipo 200...

      Elimina
  14. A me spuntava questa scritta quando andavo ad incollare il codice css:

    More than one widget was found with id: HTML1. Widget IDs should be unique

    Poi non so come ho fatto e ci sono riuscito...
    Ma visitando il mio blog: http://gaitalia-tumblr.blogspot.it/ il menù a tendina non appare, com'è possibile? Cosa sbaglio?

    Bellissima guida, comunque, grazie! :)

    RispondiElimina
    Risposte
    1. L'errore che ti aveva dato era che possedevi due widget "HTML1", per rimediare basta cancellare uno dei due o aggiornare la pagina.
      Per il menù a tendina che non ti appare la colpa è del tema, con le prove che avevo fatto io col tema nera di Blogger non apparivano, utilizza quello Simple bianco e poi lo fai diventare più scuro cambiando i colori del modello.

      Elimina
  15. Ciao....ho trovato molto utile il tuo tutorial e il menu a tendina è venuto perfettamente...solo che mentre ci "pastrocchiavo" un pò sopra per modificare carattere, misure ecc ecc l'avevo inserito provvisoriamente in basso e avevo lasciato in alto le "pagine" predefinite di Blogger come menu. Una volta completato il menu a tendina (con tutti i link giusti e le voci che mi interessavano, l'ho spostato in alto (sotto alle pagine, le quali avrei nascosto successivamente) e praticamente mi si è scombussolato tutto, i parametri erano uguali ma la grafica appare completamente diversa....hai per caso idea del perchè di sta cosa? Sto diventando matto per capire da 2 giorni ma nn riesco a risolvere la cosa. Grazie per una tua eventuale risposta. Luca

    RispondiElimina
    Risposte
    1. se vuoi usare questo menù devi eliminare il menù delle pagine che hai attualmente in alto perché vanno in conflitto, o l'uno o l'altro.

      Elimina
    2. Ma se le nascondo le pagine non va bene? Perchè quelle mi servono e ho già inserito i link di ognuna nel menu a tendina.
      http://fcportsanpevl.blogspot.com

      Elimina
    3. Adesso tipo ho provato a spostare le pagine di lato dopo averle nascoste e cmq il menu a tendina risulta scombussolato: c'è una riga verde che quando era in basso non c'era che taglia tutte le voci principali, in più quando si apre la tendina le sotto voci risultano tagliate a metà e poi avevo anche aggiunto delle sotto-sotto voci che adesso non si aprono più, mentre quando è in basso funziona tutto alla perfezione....non riesco a capire...

      Elimina
    4. ok ho capito, per rimediare devi individuare tutti i codici:
      padding: 9px 12px 10px 12px;
      e poi diminuire il valore 10 al punto giusto e così si toglierà quello spazietto tra la sezione e la sottosezione.

      Elimina
  16. Ciao, nel menù a tendina non mi appaiono le scritte del tipo : voce 3.2 , voce 3.3 ecc...ma solo "voce 3.1". Dove sbaglio?

    RispondiElimina
    Risposte
    1. forse c'è un codice css che hai messo in passato che riduce le distanze perché se ci fai caso appena arriva alla data del post non va oltre essa, in teoria le sottosezioni sarebbero dovuto comparire anche di sopra... o forse non è del tutto compatibile col tuo tema.

      Elimina
  17. grazie mille per la risposta,ma cosa mi consigli?

    RispondiElimina
    Risposte
    1. se vuoi quel menù di cambiare tema, comunque vedrò se esistono alternative in questi giorni :)

      Elimina
    2. grazie per la tua disponibilità e professionalità!

      Elimina
  18. Andrea buonasera, complimenti per il blog! Ho bisogno di aiuto, sto creando un blog, ed ho provato ad inserire questo menu seguendo passo passo le tue spiegazioni. Ovviamente come prova, l'ho fatto ridotto, inserendo solo tre voci,Home,About e Indice ricette (con sottomenu).Il risultato è che il menu si vede perfettamente, ma il problema è che mi dice che le pagine(anche la home) non esistono, Non riesco a capire come collegare le pagine al menu.Credimi sono settimane che ci sto lavorando e ancora non riesco a farlo. Tu hai detto nella spiegazione che al posto di # ci va il link di un post che vogliamo mette e poi dando una risposta hai detto che che prima bisogna creare le pagine e poi inserire il link di esse nel codice Html. Mi puoi spiegare come si fa??? Non l'ho capito!!!!!! Come faccio a creare le pagine e a collegarle?
    Aiutami, sto in crisi!
    Grazie!!!!
    Paolo

    RispondiElimina
    Risposte
    1. Certo devi sostituire il cancelletto con il link di una pagina o di un post.
      Inizia con la Home e poi coi link delle pagine, per crearle ed ottenere il link leggi qui:
      http://www.scuolissima.com/2014/04/come-usare-le-pagine-statiche-di-blogger.html

      Elimina
  19. Perdonami... è tutto ok... ma quella freccia non riesco a capire come cancellarla... o almeno qual è il pezzo di codice per farla diventare bianca!

    RispondiElimina
    Risposte
    1. non ti seguo, questo menù non presenta "frecce". E' vero certe cose si possono nascondere usando il css inserendo il nome della classe e poi {display:none;}.... ma questo è un altro discorso.

      Elimina
    2. Ciao, e grazie per la risposta...
      Intendo le frecce nere che puoi vedere in questa immagine:
      http://i60.tinypic.com/30hrbc0.jpg

      Poi ho un altro problema... se inserisco più di 8 voci nel menu verticale, dalla 9a in poi sballano tutte, come puoi vedere da quest'altra foto:
      http://i61.tinypic.com/2zgb052.jpg

      Grazie!

      Elimina
    3. questo menù non viene creato da zero ma prende forma in base al tema che si sta utilizzando, le freccette appaiono perché sono tipiche del tuo tema e si vede sballato perché aprendo le sottosezioni te le mette sotto il logo (o altre cose).
      Prova ad usare l'altro menù, quello multilivello non dovrebbe darti questo tipo di problemi.

      Elimina
    4. Ciao... il secondo... non so come... si è risolto da solo... forse è un problema di formattazione... vedrò cosa lo impappina...

      Per il primo, invece, ho capito: la freccia di cui ti parlavo è il simbolo dell'elenco puntato che con ul e li viene fuori con il mio template. Mi dai qualche idea per eliminarlo, tipo bypassando in qualche modo il css del template?

      Elimina
    5. Se non ti funziona questo metodo non ho altre soluzioni. Devi incollare prima di ]]></b:skin> questo codice qui sotto:

      #HTMLX li {
      list-style-image: display:none;
      }

      al posto di X devi inserire il numero del widget del menù. Per trovare il numero (cioè l'ID), segui una parte di questa guida:
      http://www.scuolissima.com/2013/05/mostrare-i-widget-solo-in-homepage-post-etichette-archivi-pagine.html

      Elimina
    6. Avevo pensato di inserire l'attributo nel css:

      #IpcI ul {
      float: left;
      list-style-image: none;
      list-style: none;
      margin: 0;
      padding: 0;

      Ma come per magia mi scompare il menu. Infatti, se vado nella sezione Layout il widget aggiunto con il codice che hai fornito è sparito!

      Elimina
    7. prova ad usare solo list-style:none; togliendo la parola "-image". Se non va nemmeno così, non ne ho idea.

      Elimina
  20. Fatto come mi hai detto (era HTML4)... risultato? Identico a quanto fatto da me nell'altro modo... SPARITO TUTTO! Credo che abbiamo ragionato allo stesso modo in punti diversi del codice, ma il risultato non è quello sperato... invece di far scomparire la freccia, scompare tutto l'elenco puntato che fa da menu!

    RispondiElimina
    Risposte
    1. usa questo nuovo codice, ed inserisci il link di una immagine che vuoi tu, così in teoria sostituisce la freccia.
      #HTMLX li {list-style-image: url(URL_IMMAGINE);}
      Questa è davvero l'ultima chance.

      Elimina
  21. Provo ad inserire un cubetto del colore del menu in modo da farla apparire trasparente.

    Nel frattempo ti chiedo una cortesia... ho notato che in layout non si può eliminare il Top Menu, il menu orizzontale del mio template... nel frattempo che provo a trovare il codice per eliminarlo, potresti darmi una mano?

    Il sito è ISOLE GRECHE

    RispondiElimina
    Risposte
    1. cerca
      .art-nav
      e poi elimina min-height: 25px; che si trova dentro le parentesi graffe o inserisci display none al suo interno... però non andiamo fuori tema non aiuto per temi diversi da questo ;)

      Elimina
  22. Ah, per quanto riguarda l'altro problema... tutto risolto... m'ero rincoglionito e nn mi accorgevo che nel codice avevo messo il tag di chiusura di a prima del testo e quindi sembrava imballarsi!

    RispondiElimina
  23. OK! Tutto risolto... anche se confermo i problemi di utilizzo del menu con Chrome... non appena si passa con il cursore nel sotto menu (a tendina) scompare rendendo difficile la navigazione... non riesco a capire il perché ma non capita sempre e capita con Chrome...

    RispondiElimina
    Risposte
    1. si lo so', succede in alcuni temi (non in tutti), devi fare come ho suggerito nei commenti di questa pagina a Schioppa77.

      Elimina
  24. Ciao posso farti una domanda? Come faccio a fare in modo che però risulti centrato.
    Volevo mettere solo pochi collegamenti, ma così facendo mi viene allineato a sinistra e preferirei fosse centrato :).Grazie in anticipo :))

    RispondiElimina
    Risposte
    1. dentro le parentesi del codice:
      #Scuolimenu { }

      devi cancellare widht:100%
      e poi aggiungere questi:
      width:452px;
      margin-left:auto;
      margin-right:auto;
      Il menù oltre ad essere centrato si vedrà anche tagliato, puoi variare la larghezza aumentando o diminuendo il numero "452".

      Elimina
    2. Grazie mille provo subito :))

      Elimina
  25. Ciao, scusa ma anche io ho un problema (ovviamente non grave).
    Ho inserito tutto quello che hai scritto e fatto le modifiche che hai consigliato anche per i sottomenù, almeno per la larghezza, ma aprendo il menù Fantasy Classico vedo che "il signore degli anelli - la compagnia dell'anello" va a sovrapporsi in parte a "il signore degli anelli - le due torri"
    Il blog è:http://lettolibro.blogspot.it/
    sapresti aiutarmi?

    grazie mille in anticipo e grazie comunque per il menù funzionante, ho provato a seguire altri tutorial ma mi si sballava tutta l'intestazione, almeno con questo mi trovo molto bene!

    RispondiElimina
    Risposte
    1. perché il testo è troppo lungo ed occupa due righe, se lo accorci risolvi il problema senza mettere mano al codice.

      Elimina
  26. Ciao! Complimenti per la guida! Il mio problema è il seguente: ho creato le varie sezioni e vorrei inserire dei link cliccabili all'interno in modo che si aprano poi in una pagina a parte; al momento quando entro nelle varie sottosezioni mi viene fuori la scritta "Spiacenti. La pagina del blog che cerchi non esiste." Grazie in anticipo, ciao!

    RispondiElimina
    Risposte
    1. significa che dove vai a cliccare con il mouse non hai inserito un link corretto.
      Per aprire un link in un'altra pagina devi inserire target="_blank".

      Elimina
  27. Innanzitutto non capisco come faccio a pubblicare un post e farlo finire nella sezione desiderata, (se metto l'URL della pagina non succede niente, lo pubblica solo in home page) poi, esattamente, dov'è che devo inserire il codice che dici tu? Grazie;)

    RispondiElimina
    Risposte
    1. i link devi sostituirli al cancelletto, comunque quello che chiedi non c'entra niente col menù ma con alcune tue lacune, per esempio le sezioni sarebbero le etichette, leggi qui:
      http://www.scuolissima.com/2013/03/etichette-blog-blogger-cosa-sono-a-cosa-servono.html

      per aprire i link in altre pagine, devi fare così:
      http://www.scuolissima.com/2012/07/inserire-link-dentro-una-parola.html

      Elimina
  28. Come aggiungo una quinta e sesta voce?
    Ho provato a farlo ma poi si incasina tutto (penso vada modificato anche il CSS?)
    Grazie dell'aiuto!

    RispondiElimina
    Risposte
    1. il codice css non c'entra per aggiungere le sezioni, in quello sopra prima dell'ultimo </ul> devi aggiungere la sezione e le sottosezioni che vuoi, per esempio:
      <li>
      <a href='#'>Voce 5</a>
      <ul>
      <li><a href='#'>Voce 5.1</a></li>
      <li><a href='#'>Voce 5.2</a></li>
      <li><a href='#'>Voce 5.3</a></li>
      <li><a href='#'>Voce 5.4</a></li>
      <li><a href='#'>Voce 5.5</a></li>
      <li><a href='#'>Voce 5.6</a></li>
      <li><a href='#'>Voce 5.7</a></li>
      </ul>
      </li>

      Elimina
    2. Benissimo, grazie!
      Altra domanda se vedi sul sito www.wivawrestling.com io vorrei che la barra del menu fosse lunga come il banner in alto.
      Come faccio?
      A sinistra manca un pezzetto.

      Elimina
    3. Prova a togliere il secondo margin: 0;. Dal tuo codice sembra che hai aggiunto anche margin-right:30px;, se ti si vede più corto rimuovilo e dovrebbe vedersi correttamente...

      Elimina
    4. Perdonami, ma non c'ho capito nulla :D

      Elimina
    5. Nel codice css c'è "margin: 0;" che viene ripetuto parecchie volte, partendo dall'alto devi rimuovere il secondo che vedi. Prova così. Io ho già provato "virtualmente" dal tuo blog stesso è funziona ;D

      Elimina
    6. Perdonami ma non ho capito.
      Potresti rispiegarmi esattamente come dovrei fare?

      Elimina
    7. meglio di così non riesco, scrivimi sulla pagina Facebook di Scuolissima che li magari usando le immagini riesco a fartelo capire.

      Elimina
    8. Scusami ho postato due volte il messaggio e non avevo letto la tua seconda risposta.
      Ho fatto come hai detto e funziona grazie mille!
      Però ora sbuca un pezzettino in troppo a destra rispetto al banner in alto!
      Come faccio?
      Un'altra cosa: vorrei usare il font American Captain per il menù.
      Come faccio a inserirlo?
      Ho provato a cambiarlo nel CSS scrivendo American Captain al posto di Trebuchet ma niente è cambiato.
      Puoi aiutarmi?
      GRAZIE ANCORA!

      Elimina
    9. sembra che hai aggiunto "margin-right:30px", se lo trovi, eliminano e dovrebbe sistemarsi. Per il font è già spiegato in alto la parte da modificare, se non funziona non lo so',

      Elimina
  29. Ciaoooooooooo grazie mille per questo post...solo che volevo chiederti,io ho fatto tutti i passaggi ma il menù a tendina non spunta,cioè spunta ma evidenziando solo la prima voce come mai??? :((
    http://likeadiamonds87.blogspot.it/

    RispondiElimina
    Risposte
    1. il menù sta funzionando ma il tuo modello sembra incompatibile coi menù a tendina, cioè te li taglia e li posiziona al di sotto del contenuto. Ti conviene usare il modello semplice se ti serve questo menù.

      Elimina
    2. ma un altro metodo per avere un menù del genere con il mio modello???c'è??grazie mille per la risposta :)

      Elimina
    3. il problema si presenta con tutti i modelli 'Filigrana' e probabilmente anche con quelli a visualizzazione dinamica, su quello 'Semplice' funziona al 100%, sugli altri non lo so'.
      Era già previsto che non sarebbe funzionato a tutti, infatti alla fine dell'articolo avevo linkato quest'altro:
      http://www.scuolissima.com/2014/04/menu-orizzontale-multilivello-blogger.html

      già testato, e funziona con quasi tutti i modelli :D

      Elimina
    4. Ciao Andrea,

      purtroppo io utilizzo un modello semplice (con personalizzazione nulla), e il menu non viene comunque visualizzato.
      Proverò quello multilivello, eventualmente.

      Elimina
    5. non compare nulla? Ma l'hai inserito il gadget su layout? eventualmente prova l'altro :)

      Elimina
  30. Ciao!
    Siccome mi si è fottuto l'html del sito e ho dovuto farlo da capo, mi potresti aiutare con alcune cosine?
    Vorrei che la barra del menù fosse lunga come il banner sopra, puoi dirmi esattamente cosa modificare?
    Inoltre quando passo sopra i tasti col mouse compare una strana e fastidiosa linea bianca sotto il tasto del menù.
    Come posso risolvere? ecco il link del mio sito www.wivawrestling.com

    Grazie mille

    RispondiElimina
    Risposte
    1. i tuoi commenti passati non li ho cancellati, li trovi ancora su questa pagina.
      Le linee bianche si visualizzano su alcuni temi di blogger e non c'è un rimedio se non quello di usare un modello diverso (tipo il Semplice); se vuoi un consiglio ti conviene usare un'altro menù simile a questo:
      http://www.scuolissima.com/2014/04/menu-orizzontale-multilivello-blogger.html

      Elimina
  31. Ciao! io ho seguito tutto come è scritto ma nel momento in cui sposto il widget html che ho creato con all'interno il codice css sotto l'intestazione non mi si visualizza....se invece lo lascio sotto i post si visualizza correttamente. può essere un problema del modello? premetto che è il modello semplice di blogger stesso.
    Grazie se puoi aiutarmi

    RispondiElimina
    Risposte
    1. forse se stai usando un altro menù nella stessa posizione non funziona... oppure te lo inserisce sotto qualche cosa e non riesci a vederlo, dovresti provare tu stessa su creandoti un blog vuoto per fare tentativi.

      Elimina
  32. Salve..il menu funziona perfettamente e la ringrazio per l'aiuto che mi ha dato..ora ho un problema dovrei espandere il mio menù aggiungendo un sotto menù al già esistente sottomunù..
    in altre parole alla voce 1.2 del menù 1 vorrei aggiungere 1.2.1 che si aprirà alla destra della voce 1.2..come posso farlo ? mi può aiutare?

    RispondiElimina
    Risposte
    1. Ciao, con questo menù non è possibile fare quello che chiedi; ma alla fine dell'articolo ne ho consigliato un altro che ha questa caratteristica.

      Elimina
  33. Ciao! Io ho fatto tutto, ma nel momento in cui vado su una categoria e si mostrano le sottocategorie, non riesco a selezionarle, perché spariscono (non so bene come spiegare, il mio blog è www.francinesplacediy.blogspot.it ), come se potessi selezionare solo quella principale... Mi sapresti aiutare? Grazie!
    Elisa

    RispondiElimina
    Risposte
    1. non si può fare nulla, ad alcuni va ad altri no. Per chi avesse lo stesso problema invito ad utilizzare quest'altro menù:
      http://www.scuolissima.com/2014/04/menu-orizzontale-multilivello-blogger.html

      Chiudo il post!

      Elimina