Pubblicato il 20/08/13e aggiornato il

Come installare un drop-down menù sempre visibile in Blogger.

Come installare un menù flottante per Blogger che rimanga fisso allo scorrere della pagina e come inserire anche dei sottomenu con effetto hover e trasparenza.
Ho già più volte scritto che molte idee sugli articoli che pubblico mi vengono dalla lettura dei commenti sul sito che stimolano il mio interesse. Un discorso a parte lo meritano le email che ricevo tramite il modulo di contatto presente sul blog e con uno analogo a diposizione dei lettori nella pagina fan. Non faccio consulenze a pagamento e non ho ancora sviluppato un così spiccato spirito francescano da farle gratuitamente anche perché non ne ho il tempo materiale. Il mio contributo lo offro gratis rispondendo ai commenti dei lettori con l'avvertimento che ho solo un po' più di esperienza della maggior parte di loro e che non sono certo depositario della conoscenza assoluta.

In linea di massima il modulo di contatto dovrebbe servire per interazioni diverse da quelle in cui si chiede supporto per risolvere i problemi del blog. Quando ricevo messaggi email su questi temi o addirittura su Facebook nella maggior parte dei casi evito di rispondere. Qualche volta mi si chiede di creare una personalizzazione simile a quella che è stata vista su un certo sito. In una email che ho ricevuto da poco mi si domandava come fare per realizzare un menù che rimanesse sempre visibile allo scrollare della pagina. L'esempio era dato da un sito Wordpress e quindi non faceva testo. Ho avuto però la consapevolezza che nelle decine di menù che ho presentato in tutti questi anni non ce n'era neppure uno che fosse flottante e che quindi rimanesse fisso nella parte alta della pagina.

Un tale menù è indubbiamente molto usabile da parte dei lettori visto lo possono utilizzare anche da fondo pagina. Ho pensato che si potevano realizzare anche dei sottomenù senza l'utilizzo del javascript che appesantisce la pagina. L'aspetto del menù che vi propongo è il seguente

menù-flottante-blogger
È funzionante con tutti i più moderni browser compreso Internet Explorer 9 o superiore. Ho inserito anche delle icone con collegamento ai vari social network oltre a un moderato effetto ombreggiatura e trasparenza. Un tale menù può essere personalizzato praticamente in tutte le sue componenti. L'unico problema è che nasconde la navbar. I pochi che la usano ancora potrebbero anche ovviare provando a inserirlo più in basso del punto che indicherò in seguito.



Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga codice </head>. Contrariamente a quanto si fa di solito, dobbiamo incollare il codice seguente subito sotto a tale riga

<!-- Menu Flottante Inizio -->
<style>
#float_main{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
z-index:100;
  top:0px;
left:0px;
position:fixed;
    box-shadow:2px 2px 5px  #333; /* Ombreggiatura */
-moz-box-box-shadow:2px 2px 5px  #333;
-web-kit-box-shadow:2px 2px 5px  #333;
-goog-ms-box-shadow:2px 2px 5px  #333;
background:#191919; /* Colore sfondo menu */
}
#float_nav{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}
#float_nav ul{
  float:left;
  margin:0;
  padding:0;
}
#float_nav li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0
background:#191919;
}
#float_nav li a, #float_nav li a:link{
  color:#fff;
  display:block;
  margin:0;
font:16px trebuchet, georgia, verdana; /* Famiglie e dimensioni di caratteri */
 padding:10px;
 text-decoration:none;
}
#float_nav li a:hover, #float_nav li a:active, #float_nav .current_page_item a  {
  color:#fff;
  padding:10px;
background: rgb(0,192,255); /* Colore al passaggio del cursore */
background: -moz-linear-gradient(top,  rgba(0,192,255,0.8) 0%, rgba(0,192,255,0.8) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,192,255,0.8)), color-stop(80%,rgba(0,192,255,0.8))); /* Opacità 80% */
background: -webkit-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: -o-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: -ms-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: linear-gradient(to bottom,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00C0FF&#39;, endColorstr=&#39;#00C0FF&#39;,GradientType=0 );
}
#float_nav li li a, #float_nav li li a:link, #float_nav li li a:visited{
  font-size: 14px; /* Dimensione caratteri voci secondarie */
background:#191919;
  color: #fff; /* Colore del testo */
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
}
#float_nav li li a:hover, #float_nav li li a:active {
  color: #fff;
background: rgb(0,192,255);
background: -moz-linear-gradient(top,  rgba(0,192,255,0.8) 0%, rgba(0,192,255,0.8) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,192,255,0.8)), color-stop(80%,rgba(0,192,255,0.8)));
background: -webkit-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: -o-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: -ms-linear-gradient(top,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
background: linear-gradient(to bottom,  rgba(0,192,255,0.8) 0%,rgba(0,192,255,0.8) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00C0FF&#39;, endColorstr=&#39;#00C0FF&#39;,GradientType=0 );
}
#float_nav li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}
#float_nav li:hover ul, #float_nav li li:hover ul, #float_nav li li li:hover ul, #float_nav li.sfhover ul, #topfloat_nav li li.sfhover ul, #topfloat_nav li li li.sfhover ul{
  left:auto
}
#float_nav li:hover, #float_nav li.sfhover{
  position:static
}
#float_dropdown {
  float:right;
  width:250px; /* Larghezza del menù con le icone */
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
   }
#float_dropdown img
{
margin-left:5px; /* Posizionamento laterale icone */
margin-top:-3px; /* Posizionamento verticale icone */
height:32px; /* Dimensione icone */
border:none;
}
</style>
<!-- Inizio Elementi del Menù -->
  <div id='float_main'>
     <div id='float_nav'>
         <ul>
           <li><a href=''>Home</a></li>
           <li><a href='#'>About</a>
           <ul>
           <li><a href='#'>Bio</a></li>
           <li><a href='#'>Privacy</a></li>
           <li><a href='#'>Gallery</a></li>
           </ul>
          </li>
           <li><a href='#'>Strumenti</a>
               <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>
                  <li><a href='#'>Voce 6</a></li>
               </ul>
           </li>
    <li><a href='#'>Etichette</a>             
             <ul>
                  <li><a href='#'>Widget</a></li>
                  <li><a href='#'>Modelli</a></li>
                  <li><a href='#'>SEO</a></li>
                  <li><a href='#'>Effetti</a></li>
                  <li><a href='#'>Blogger</a></li>
                  <li><a href='#'>Dynamic Views</a></li>
                  <li><a href='#'>Android</a></li>
                  <li><a href='#'>Software</a></li>
               </ul>
           </li>
             <li><a href='#'>Contattaci</a>          
           </li>
         </ul>
      </div>
<!-- Inizio icone social -->
      <div id='float_dropdown'>        
<a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' target='_blank'><img alt='Iscriviti ai Feed' src='https://lh5.googleusercontent.com/-lNomLqps3b0/UhKcma55h8I/AAAAAAAAjHU/Omv7xrh31V8/s72/rss.png' title='Iscriviti ai Feed'/></a>
<a href='http://www.facebook.com/parsifal32' target='_blank'><img alt='Aggiungimi su Facebook' src='https://lh3.googleusercontent.com/-El4u0ba7djM/UhKcexjd-2I/AAAAAAAAjHE/G0Cp6FU2BnA/s72/facebook.png' title='Aggiungimi su Facebook'/></a>
<a href='https://twitter.com/parsifal32' target='_blank'><img alt='Seguimi su Twitter' src='https://lh6.googleusercontent.com/-6nyW-ClSo7E/UhKcuogZhZI/AAAAAAAAjHk/kNDX7gzsFGM/s72/twitter.png' title='Seguimi su Twitter'/></a>
<a href='https://plus.google.com/111056841635962157738' target='_blank'><img alt='Aggiungimi su Google+' src='https://lh3.googleusercontent.com/-S3AWUMqyP-Y/UhKcj6ol7HI/AAAAAAAAjHM/gJl4lH8R464/s72/googleplus.png' title='Aggiungimi su Google+'/></a>
<a href='http://www.youtube.com/user/parsifal32' target='_blank'><img alt='Segui il Canale di Youtube' src='https://lh6.googleusercontent.com/-yVl2tC0r6eE/UhKcw8fUsvI/AAAAAAAAjHs/u_Dmv0cH_r4/s72/youtube.png' title='Segui il Canale di Youtube'/></a>
<a href='http://pinterest.com/parsifal32/' target='_blank'><img alt='Seguimi su Pinterest' src='https://lh6.googleusercontent.com/-zRDIREgp8wI/UhKcqNWjKKI/AAAAAAAAjHc/JsV5MLK7z40/s72/pinterest.png' title='Seguimi su Pinterest'/></a>
      </div>
   </div>
<!-- Menu Flottante Fine -->

Si salva il modello. Ho colorato i parametri più importanti su cui si può intervenire e accanto a essi ho messo un commento con l'elemento a cui si riferiscono.

PERSONALIZZAZIONI DEL MENU FLOTTANTE

  1. Il colore di sfondo del menù è #191919 mentre quando si passa sopra con il cursore abbiamo una opacità dell'ottanta per cento e il colore diventa rgba(0,192,255,0.8). Questa notazione RGBA in HEX diventa #00C0FF. Si può intervenire modificando i colori e anche la trasparenza. Bisogna ricordarsi di modificare coerentemente tutte le occorrenze magari usando Notepad++.
  2. È possibile scegliere la famiglia di font (Trebuchet, ecc )e anche le dimensioni di quelli principali (16 pixel) e di quelli secondari (14 pixel) oltre al colore del testo (#fff quello proposto).
  3. Sono personalizzabili anche l'altezza del menù (40 pixel) e la sua larghezza (100%)
  4. Le icone sono rappresentate dagli URL in viola alla fine del codice e possono essere sostituite da altre modificando gli indirizzi. La loro dimensione di 32 pixel è modificabile così come pure il loro posizionamento tramite i tag margin-top e margin-left
  5. Possiamo decidere di mettere solo le icone che ci servono eliminando le righe di quelle che non ci interessano a partire da <a href=.. fino a </a> 
  6. Sono chiaramente da sostituire gli URL con il collegamento ai social network colorati di rosso e sono personalizzabili i tag alt e title con la descrizione della icona

REALIZZAZIONE DEL MENU

Dopo il commento Inizio Elementi del Menu si crea il menù per il nostro blog. Si possono sostituire tutte le voci che vogliamo e anche la sua struttura. Il menù proposto ha questa struttura principale

<ul>
<li><a href=''>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Strumenti</a></li>
<li><a href='#'>Etichette</a></li>
<li><a href='#'>Contattaci</a></li>
</ul>

dove possono essere aggiunti dei sottomenù in modo molto semplice. Per esempio se decide di farlo per la voce Etichette dobbiamo sostituire alla relativa riga questo blocco di codice

<li><a href='#'>Etichette</a>             
             <ul>
                  <li><a href='#'>Widget</a></li>
                  <li><a href='#'>Modelli</a></li>
                  <li><a href='#'>SEO</a></li>
                  <li><a href='#'>Effetti</a></li>
                  <li><a href='#'>Blogger</a></li>
                  <li><a href='#'>Dynamic Views</a></li>
                  <li><a href='#'>Android</a></li>
                  <li><a href='#'>Software</a></li>
               </ul>     
 </li>

dove sono stati colorati di viola e di rosso i tag tra cui inserire un nuovo elenco <ul> … </ul>. I collegamenti si creano inserendo gli URL al posto dei cancelletti ( # )per esempio in questo modo
<li><a href='URL_POST_DI_NOTE_BIOGRAFICHE'>Bio</a></li>
Enjoy!




60 commenti :

  1. Ciao .
    E' possibile che con la nuova visualizzazione del HTML
    il riquadro di ricerca (CTRL+F)
    abbia difficoltà a trovare la stringa cercata?
    Grazie.

    RispondiElimina
    Risposte
    1. Leggi il tutorial
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      e guarda il video
      @#

      Elimina
    2. Grazie ... scoperto l'errore ... non cliccavo nell'area del codice.

      E' possibile inserire nell'area degli elementi dei menù, un ulteriore sottomenù
      es.
      (ul)
      (li)(a href='#'(Bio)/a)(/li)
      nella etichetta Bio inserire i nomi ad es. degli autori
      basta aggiungere sotto Bio
      (ul)
      (li)(a href='#')Nome 1(/a)(/li)
      (li)(a href='#')nome 2(/a)(/li) ecc.?
      ... scusa l'uso delle parentesi.

      Elimina
    3. In questo menù ci sono solo due livelli o se vuoi un solo livello di sottomenù. Se hai una voce da dover suddividere basta che tu la metta nel livello della struttura principale per poi aggiungere i relativi sottomenù
      @#

      Elimina
  2. But maybe, some day, you could open an e-store where we can buy the templates with the things you teach already there.

    RispondiElimina
    Risposte
    1. No. I'm not going to sell anything :)
      Are you sure someone would buy my work?
      However with Blogger you can create an e-commerce website :)), if you are interested ...
      http://www.ideepercomputeredinternet.com/2011/08/shopping-cart-e-un-modello-di-blogger.html
      @#

      Elimina
  3. uno dei più bei menù proposti, complimenti

    RispondiElimina
  4. Ma ho dei problemi con il tasto Home! non riesco ad insierire l'indirizzo, come mai?

    RispondiElimina
    Risposte
    1. Non occorre inserire l'indirizzo. Se ci clicchi si apre la home. Comunque basta che lo incolli tra le due virgolette 'URL HOME'
      @#

      Elimina
  5. Ciao!
    Bellsimo menu!
    Tutti questi codici sono un mondo nuovo per noi, stiamo provando a modificare il menu secondo le tue indicazioni, ma non riusciamo a spaziare le voci principali del menu orizzontale... come si può fare?

    Grazie e complimenti per il tuo blog!

    RispondiElimina
    Risposte
    1. Se ben ricordo le voci principali si spaziano automaticamente nel senso che un testo con più caratteri prende più spazio di uno con meno caratteri
      @#

      Elimina
    2. scusaci, probabilmente ci siamo spiegati male perchè siamo alle prime armi :-)
      volevamo dire se è possibile distribuire le varie voci sull'intera lunghezza della barra del menù. Non vogliamo allegare link, perchè abbiamo visto che il commento verrebbe eliminato, ma se vai al nostro blog, potrai vedere che abbiamo seguito il tuo codice per creare il nostro menu, ma che tutte le voci rimango centrate e non si distribuiscono lungo la barra verde del menu... speriamo di esserci spiegati meglio... grazie ancora per il tuo aiuto!

      Elimina
  6. Non si possono inserire link cliccabili ma si possono incollare URL tranquillamente. Per esempio in questo modo
    http://detailsofus.blogspot.it/
    Ho visto che il menù va tutto sulla destra perché il modello ha l'area del post tutta spostata da quella parte. Provate a modificare questa riga
    margin:0 0 22px 0;
    in questo modo
    margin:0 0 22px -500px;
    Non so se funzionerà Nel caso potete calibrare meglio cambiando il valore di -500px con un numero diverso
    @#

    RispondiElimina
    Risposte
    1. Forse meglio
      margin:0 0 22px -300px;

      Elimina
    2. provato ma nulla. E' per quello volevamo distribuire lungo la barra del menu le varie voci, appunto per non avere questo problema... è possibile?

      Elimina
    3. Stiamo provando a modificare i margini, ma comunque le voci non si spaziano :-(
      Confidiamo in un tuo help ;-)

      Elimina
  7. Ciao Ernesto, mi chiedevo se secondo te è possibile inserire un'immagine sulla sinistra di questo menù flottante (prima delle voci del menù), ho provato aggiungendo agli elementi del menù un codice tipo questo:

    < div id='float_dropdown'>
    <(img) alt='#' src='URL IMMAGINE' title='TITOLO IMMAGINE'/>
    < /div>

    (ho messo gli spazi e le parentesi altrimenti non potevo lasciare il commento)

    ma l'immagine si posiziona in alto e al centro e quindi fa sballare tutte le voci... Cosa sbaglio....?
    Grazie in anticipo!

    RispondiElimina
    Risposte
    1. Prova a procedere in questo modo:
      Al posto di
      <div id='float_nav'>
      <ul>
      <li><a href=''>Home</a></li>
      <li><a href='#'>About</a>

      o del codice che hai configurato sostituisci

      <div id='float_nav'>
      <ul>
      <li><a href='#'><img src='URL_IMMAGINE'/></a></li>
      <li><a href=''>Home</a></li>
      <li><a href='#'>About</a>

      Non sono però in grado di dirti a priori che funzionerà
      @#

      Elimina
    2. provato e funziona alla grande, grazie mille Ernesto, sei davvero gentilissimo!!

      Elimina
    3. l'unico problema è che ora le voci del menù si sono spalmate su due righe nonostante ci sia lo spazio fisico perché restino su una... quale parametro devo modificare? grazie ancora!!

      Elimina
    4. risolto! lo scrivo nel caso serva a qualcuno:
      ho agito sul valore width modificandolo da 700 in 900
      grazie ancora :)

      Elimina
  8. Ciao Ernesto, il menù è fantastico!
    Che voce devo modificare per diminuire lo spazio a destra nella barra del menu prima che inizino le icone dei social?
    Grazie!!!

    RispondiElimina
    Risposte
    1. Il menù è strutturato per prendere tutta la larghezza. Puoi aumentare il numero delle voci. Invece per spostare più a sinistra le icone potresti provare a sostituire
      margin:9px 10px 0px 0px; con
      margin: 9px 10px 0px -150px;
      Non ho testato quindi non so se funzionerà
      @#

      Elimina
    2. Oppure puoi semplicemente modificare la larghezza del menù e passare da 700 a 600 pixel
      @#

      Elimina
  9. Ciao Ernesto, è da settimane che smanetto con i tuoi menu e questo è giusto che mi serviva.
    L'ho personalizzato tanto (ho tolto anche l'effetto flottante) ma mi servirebbero ancora un paio di dritte.
    Il problema principale è che spostando il menu verso destra mi si è formato uno strano scalino, come se mi vedesse una barra sotto e una sopra (è difficile da spiegare, dovresti dare un'occhiata al blog se non ti dispiace).
    Non so come fare a risolvere il problema. Spostando tutta la barra a sinistra ovviamente il problema non c'è più ma è antiestetico.
    Un'altra cosa: ho eliminato tutte le righe relative al background perché non voglio che venga evidenziata la pagina con un riquadro quando ci clicco sopra, vorrei piuttosto che cambiasse il colore della scritta al passaggio del mouse. Come posso fare?
    Ti ringrazio.

    Maria Di Biase

    RispondiElimina
    Risposte
    1. Non vedo scalini :) Sarà perché sono miope :))
      Per cambiare di colore al passaggio del mouse prova a aggiungere una riga a questo CSS
      #float_nav li:hover ul, #float_nav li li:hover ul, #float_nav li li li:hover ul, #float_nav li.sfhover ul, #topfloat_nav li li.sfhover ul, #topfloat_nav li li li.sfhover ul
      In questo modo
      {
      color:#003366;
      ...
      Non so se funzionerà ...
      @#

      Elimina
    2. Nell'attesa sono riuscita a togliere lo scalino! :)
      Adesso però mi si è creato un altro problema (credo di aver modificato qualcosa che non dovevo): la larghezza del blog.
      Si è allargato a destra e non riesco a correggerlo.

      Provo il codice che mi hai dato intanto, grazie.

      Elimina
    3. Risolto anche questo applicando un metodo altamente professionale: sono andata a caso.
      Il codice per il colore non funge ma sono già molto soddisfatta così.
      Grazie mille.

      Elimina
    4. Ciao Ernesto, ci sto lavorando da un po' ma non riesco a trovare una soluzione.
      Perché il menu si posiziona diversamente a seconda del pc da cui vedo il blog?
      C'è sicuramente una diversa risoluzione, ma non c'è un modo per adattare il menu in modo che resti fisso a prescindere?
      Qual è la riga che devo modificare affinché si veda "bene" più o meno ovunque?
      Grazie

      Elimina
    5. Solo i template con il Rensponsive Design hanno la particolarità di essere visibili nello stesso modo a prescindere dalla risoluzione dello schermo
      @#

      Elimina
    6. Ah ecco. Ogni giorno se ne scopre una.
      Cercherò di basarmi su una risoluzione standard allora.
      Grazie mille.

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

    RispondiElimina
  11. Ciao Ernesto, iprima di tutto faccio i miei complimenti per il tuo blog, è fatto molto bene. Adesso ti spiego il io problema, ho installato il tuo menù e cambiato le voci, ma non ho capito come posso aggiungere i vari URL alle singole voci!
    Spero di essermi spiegato.
    Grazie in anticipo.

    RispondiElimina
    Risposte
    1. Devi leggere la parte finale del post
      Realizzazione del menù
      Mi riesce difficile aggiungere altre spiegazioni a quelle che ho già pubblicate. Guarda anche i colori dell'esempio che ti possono aiutare.
      @#

      Elimina
  12. mi spiego meglio;
    supponiamo che abbia scritto 100 post, 50 che parlano di un argomento x e 50 che parlano di un argomento y, come faccio a raggruppare i 50 post dell' "argomento x" nella voce del menu "argomentox" e i 50 post dell' "argomento y" nella voce del menu "argomentoy" senza però voler visulizzare i sottomenù?altrimenti avrei dei sotto menù lunghissimi! spero di essermi spiegato!
    grazie

    RispondiElimina
    Risposte
    1. Per raggruppare i post ci sono le etichette (o categorie o label). Nel tuo caso metti le etichette argomentox e argomentoy agli articoli. I post relativi si troveranno tutti in queste due pagine
      http://nomeblog.blogspot.com/search/label/argomentox
      http://nomeblog.blogspot.com/search/label/argomentoy
      che potrai inerire come link nel menù
      @#

      Elimina
    2. Grande!problema risolto!
      ciao e alla prossima

      Elimina
  13. Per aggiungere un'altra sezione a una sottosezione che codice si potrebbe aggiungere?
    Tipo così:
    ________________________________________________
    Menù Pagine Contatti
    ________________________________________________
    Home
    Gadjet
    Post-----(Si apre un'altra pagina) Marzo
    Aprile
    Maggio
    Link
    Etichette
    _______________________________________________

    Spero tu abbia capito...



    RispondiElimina
    Risposte
    1. Puoi creare il menù come ti pare. Per le sezioni e sottosezioni leggi il capitolo Realizzazione del menù
      @#

      Elimina
    2. No, intendevo un'altra cosa, non mi sono spiegato...
      Intendevo per creare un menù con multi sezioni, tipo così: http://3.bp.blogspot.com/-HNH8-tUsoyw/T_xnjp0L-bI/AAAAAAAACa4/FNq3qSoY6pk/s1600/drop-down-menu-for-blogger.png

      Un menù sempre in alto e sempre visibile, ma con più sezioni...

      Elimina
    3. Di menù flottanti ho realizzato solo questo
      http://www.ideepercomputeredinternet.com/2013/08/fixed-drop-down-menu-blogger.html
      @#

      Elimina
  14. grazie Ernesto per questa funzionalità

    anche io avevo l'esigenza di riallineare verso destra.
    ho risolto così
    #float_nav{
    float:left;
    width:700px;
    height:40px;
    display:;
    padding:0;
    margin-left:100px;

    RispondiElimina
  15. ciao! per prima cosa grazie per questo post, era proprio il tipo di menu che cercavo! e sul mio blog ci sta benissimo!
    mi chiedevo se ci fosse un modo per metterlo anche nella versione mobile, possibilmente non un menù a tendina qualsiasi ma proprio questo (di modo che non devo rimpostare tutte le voci con le etichette... ne ho proprio tante, e in continuo aumento!). mi spiego meglio: vorrei impostare lo stesso menu, con le stesse voci, le stesse etichette insomma tutto il lavoro che ho già fatto per la versione pc nel codice della versione mobile... come si può fare?
    grazie mille, attendo i tuoi preziosissimi consigli!

    RispondiElimina
    Risposte
    1. Gli oggetti presenti nel template sono visualizzati anche nella versione mobile solo se il browser con cui vengono aperti li supporta. Per prima cosa vai su Bacheca > Modello e imposta Personalizza come template della versione per cellulare. Se il menù non si vede non c'è nulla da fare.
      @#

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

      Elimina
    3. grazie ancora, dal mio cellulare (iphone) il menu si vede, ma solo le prime 3 voci (da sinistra) le altre sono tagliate fuori... e poi sotto la barra menu appaiono i pulsanti social...
      se invece ruoto il cellulare (schermo in orizzontale) si vede quasi tutta la barra... è possibile avere la barra per intero anche quando il cellulare si tiene in orizzontale? (come lo tengono tutti, tra l'altro...)
      grazie!!

      Elimina
    4. Non è possibile arrivare a un simile livello di personalizzazione addiritttura in funzione del dispositivo utilizzato :))
      @#

      Elimina
    5. Ok, grazie mille lo stesso, questo menu e' bellissimo! Buon ferragosto!!

      Elimina
  16. Fantastico, grazie!! ma se volessi farlo in verticale, a scomparsa, cosa dovrei modificare? si può fare? complimenti per il sito ;-)

    RispondiElimina
    Risposte
    1. Vuoi dire laterale scorrevole immagino. Ce ne sono ma pochi in questo sito e molto vecchi
      http://www.ideepercomputeredinternet.com/2009/07/come-inserire-un-menu-laterale-tendina.html
      http://www.ideepercomputeredinternet.com/2011/10/menu-scorrevole-scomparsa-sulla-destra.html

      @#

      Elimina
  17. Scusa, lasciando impostati i valori come li hai messi tu, mi si crea un problema: quando vado a richiamare un link anchor sulla pagina, questo mi va a posizionarsi SOTTO la barra del menu... C'è un modo per far sì che il resto del contenuto del sito (e quindi anche i rimandi anchor) parta da appena sotto la barra del menu (e non dalla posizione 0)?

    Grazie mille!

    RispondiElimina
    Risposte
    1. Mi sarò spiegato male... so che non è il caso di mettere links nei commenti, ma per farti testare il problema "in azione" prova ad andare alla pagina http://www.laxolo.tk/p/avrei-bisogno-di.html e a cliccare sul primo link ("Far battezzare mio figlio") e vedrai che il titolo del paragrafo relativo contenuto nella pagina (e da me puntato con un link "anchor name") va a posizionarsi proprio sotto la barra del menu (che ha posizione "fixed") e quindi diventa illeggibile sia il titolo del paragrafo che la prima riga dello stesso...

      Elimina
    2. Il problema non è il menù. Nel link in questione hai inserito un simbolo ajax
      avrei-bisogno-di.html#battezzare
      probabilmente come segnalibro. Il segnalibro si posiziona sempre all'inizio della pagina. Il menù non c'entra minimamente. Se inserire dei segnalibri per te è fondamentale cerca di mettere gli id più alti dell'inizio del capitolo
      http://www.ideepercomputeredinternet.com/2015/07/creare-link-interni-segnalibri-capitoli.html
      @#

      Elimina
    3. Non volevo assolutamente "incolpare" il tuo codice del menu, ci mancherebbe! Solo che il problema a me si è posto solo ora che ho inserito il menu, perché prima le mie pagine non contenevano alcun elemento "fixed" e quindi nulla si sovrapponeva al mio segnalibro...

      Cambiando questione, visto che vorrei rendere il mio sito totalmente "responsive" seguendo i tuoi consigli, c'è modo di far apparire o no questa barra menu alternativamente a quella che hai creato per cellulari, a secondo delle risoluzioni dello schermo del dispositivo (usando le media queries) e non solo con la condizione "isMobile"?

      Elimina
    4. Si può usare questa tecnica che è la più semplice
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      in modo da visualizzare il menù desktop solo in quella versione e di installare invece un altro menù nella versione mobile
      @#

      Elimina
    5. Quell'articolo l'avevo già letto e la soluzione è bella.
      Ma per utilizzare un unico codice e rendere tutto il sito "responsive" (bypassando quindi l'impostazione "mostra versione mobile per cellulari" di blogger) preferirei una soluzione che metta in verticale proprio questo stesso menu completo con due livelli quando la risoluzione dello schermo non permetterebbe più di vedere le voci tutte su una riga, tipo sotto gli 880px...

      Elimina
  18. Bellissimo, lo sto usando http://www.filippobalducci.info/index8.html
    E' possibile nasconderlo e fare in modo che si veda solo quando si va più giù nella pagina?

    RispondiElimina

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