Pubblicato il 30/07/14e aggiornato il

Responsive Menù per Blogger su due livelli anche per mobile.

Menù orizzontale a 2 livelli per Blogger con Design Responsive per una corretta visualizzazione anche da dispositivi mobili.
Il Responsive Design o Design Responsivo è quella tecnica che serve a creare delle pagine web che si adattino graficamente alle diverse risoluzioni dello schermo con cui vengono aperte. Visto il grande sviluppo dei dispositivi mobili e visto che ormai il traffico da smartphone e da tablet per talune tipologie di siti è diventato non solo molto importante ma addirittura prevalente, è utile cercare di avere un blog con un aspetto che sia friendly anche per chi lo visita da dispositivo mobile. 

Gli utenti di Blogger possono attivare la versione mobile per avere un sito facilmente navigabile anche da cellulare. Questo però porta a delle rinunce per quello che riguarda le sidebar che non vengono visualizzate e i menù che anche se si opta per la versione mobile personalizzata non si aprono correttamente.  Vediamo come si possa creare un menù che sia visibile sia nella versione desktop sia nella versione mobile anche se con delle diverse modalità di navigazione. Prima di iniziare occorre andare su Modello, abilitare la versione mobile e scegliere Personalizza tra quelle disponibili.

responsive-menu

Nello screenshot precedente è mostrato il menù aperto con un normale browser desktop. Quando viene aperto da uno smartphone il menù si presenta invece in questo modo 

responsive-menu-mobile

Nei tablet invece il menù presenterà un aspetto ancora leggermente diverso

menù-responsive-per-blogger-tablet

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca il tag </head> quindi, subito sopra si incolla il seguente codice

<!-- Menu Responsive Inizio -->
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<!-- File CSS per personalizzare aspetto menu -->  <link href='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/hybridmenu.css' rel='stylesheet'/>
<!--[if lt IE 9]>
<script src="
https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"/>
<script src="
https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"/>
<![endif]-->
<!-- Menu Responsive Fine -->

dove la parte evidenziata di grigio serve esclusivamente per i dispositivi che utilizzino Internet Explorer 9. Se non ci interessano i visitatori che abbiano ancora questo browser si può fare a meno di incollarli. Il file javascript evidenziato di verde è invece stato caricato su Google Drive e sarebbe opportuno modificarlo per poi caricarlo nuovamente sullo stesso servizio di Hosting. Le modifiche riguardano essenzialmente i codici dei colori per renderli più in tono con quelli del nostro sito. 

Successivamente si cerca la riga iniziale dei contenuti del blog che è la seguente

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

In alcuni vecchi modelli ci potrebbe essere ancora il solo tag <body>. Si cerca poi la chiusura di tale tag che in entrambi i casi è </body>. Subito dopo e subito sopra queste due righe se ne incollano altre due in modo da avere tutto il codice visibile del blog in un div con la classe wrapper 

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<div id='wrapper'>
... Codice della parte visibile del blog ...</div>
</body>

Questo passaggio è fondamentale per spostare in orizzontale il contenuto della pagina quando il menù venga aperto in modalità dispositivo mobile. Ora dobbiamo inserire il menù vero e proprio tra la riga <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> e la riga <div id='wrapper'> appena incollata. Ecco un esempio di un codice di menù

<!-- Responsive Menu Inizio -->
<nav id='mobile-menu'/>
<nav id='hybridmenu'>
<ul class='main-menu'>
<li class='mobile-menu-item'><i class='fa fa-bars'/></li>
<li class='logo'>
  <a href='URL_LINK' title='Titolo Logo'>
    <img alt='nome-logo' src='https://lh6.googleusercontent.com/UXipNDtbkCc78c1U7T-YXoj6LNTzKqeg4lZshsuV30JL=w105-h96-no'/>
  </a>
</li>                
<li class='parent'>
  <a href='#'><i class='fa fa-html5'/><span>Menu Elemento 1</span></a>
  <ul class='sub-menu'>
    <li><a href='#'>Sottomenu Elemento 1</a></li>
    <li><a href='#'>Sottomenu Elemento 2</a></li>
    <li><a href='#'>Sottomenu Elemento 3</a></li>
    <li><a href='#'>Sottomenu Elemento 4</a></li>
  </ul>
</li>
<li class='parent'>
  <a href='#'><i class='fa fa-css3'/><span>Menu Elemento 2</span></a>
  <ul class='sub-menu'>
    <li><a href='#'>Sottomenu Elemento 1</a></li>
    <li><a href='#'>Sottomenu Elemento 2</a></li>
    <li><a href='#'>Sottomenu Elemento 3</a></li>
  </ul>
</li>
<li class='parent'>
  <a href='#'><i class='fa fa-gear'/><span>Menu Elemento 3</span></a>
</li>       
<li class='menu-right parent'>
  <a href='#'><i class='fa fa-phone'/><span>Menu Elemento 5</span></a>
  <ul class='sub-menu'>
    <li><a href='#'>Sottomenu Elemento 1</a></li>
    <li><a href='#'>Sottomenu Elemento 2</a></li>
    <li><a href='#'>Sottomenu Elemento 3</a></li>
  </ul>
</li>
<li class='menu-right parent'>
  <a href='#'><i class='fa fa-comment'/><span>Menu Elemento 4</span></a>
  <ul class='sub-menu'>
    <li><a href='#'>Sottomenu Elemento 1</a></li>
    <li><a href='#'>Sottomenu Elemento 2</a></li>
  </ul>
</li>              
</ul>
</nav>
<!-- Responsive Menu Fine -->

Non abbiamo ancora finito. Dobbiamo ora tornare nuovamente alla riga </body> e subito sopra a questa incollare questo ultimo codice

<!-- Script Responsive Menu Inizio -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js'/>
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/hybridmenu.js'>
    /***********************************************
    * Responsive Hybrid Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
</script>
<!-- Script Responsive Menu Fine -->

Finalmente si salva il modello. Forse è il caso di riepilogare la posizione dei tre blocchi di codice

<!-- Menu Responsive Inizio -->
... Codice primo blocco ...
<!-- Menu Responsive Fine -->
</head>
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'><!-- Responsive Menu Inizio -->
... Codice secondo blocco ...
<!-- Responsive Menu Fine -->
<div id='wrapper'> 
...Codice del template del modello iniziale ... 
 </div> 
<!-- Script Responsive Menu Inizio -->
... Codice del terzo blocco ...
<!-- Script Responsive Menu Fine -->
</body>

in cui sono state colorati di blu le righe e il codice già presente. Visto che incollare gli script sopra la riga </body> è operazione comune, dopo aver installato questo menù sarebbe opportuno incollare questi nuovi codici sopra alla riga </div> evidenziata di marrone invece di </body> .

PERSONALIZZAZIONI


Come detto per l'aspetto del menù bisogna editare il file .css evidenziato di verde. L'altro javascript evidenziato nello stesso modo è opportuno che venga caricato nell'account Google Drive dell'utente per evitare problemi di larghezza di banda. Nei due file sono presenti dei commenti in inglese per facilitare la personalizzazione. Questo menù utilizza JQuery e JQuery UI

Nel menù è presente un logo che può essere personalizzato sostituendolo con una immagine in PNG di circa 100x100 pixel. A tale logo può essere collegato un qualsiasi link come potrebbe essere la homepage. I collegamenti alle varie voci vanno inseriti al posto dei cancelletti ( # ).  Ci sono due classi di menù, quella parent che posizionerà gli elementi sulla sinistra e quella menu-right parent che invece li posizionerà sulla destra. Possono essere inseriti altri menù principali (a sinistra o a destra) e altri menù secondari con il solo vincolo di mantenere la stessa sintassi.
Fonte | Dynamic Drive -




9 commenti :

  1. scusa la ia ignoranza ma come faccio a scaricare e modificare il css che è stato caricato su google drive?

    RispondiElimina
    Risposte
    1. Per scaricarlo basta incollare l'URL nella barra degli indirizzi e pigiare su Invio quindi nella pagina che si apre si clicca con il destro del mouse e si sceglie Salva con nome (Chrome). Il file lo puoi quindi aprire con Notepad++
      http://www.ideepercomputeredinternet.com/2011/02/notepad-strumento-indispensabile-per.html
      Dopo la modifica lo salvi e per caricarlo su Google Drive segui queste istruzioni
      http://www.ideepercomputeredinternet.com/2014/07/hotlink-google-drive.html
      @#

      Elimina
    2. ti ringrazio tanto Ernesto :) sei gentilissimo, ti farò sapere se grazie a te riuscirò a combinare qualcosa ;)

      Elimina
    3. ah un altra cosa che ho dimenticato, se volessi vedere un anteprima di ciò che magari vado a modificare, con notepad++ posso farlo oppure esiste (oltre ad i vari programmi a pagamento) qualche alternativa free che permette di vedere l'anteprima? Grazie mille per tutto

      Elimina
    4. Mi pare di aver letto che intendi modificare il file CSS. Non c'è anteprima per i file. Servono per modificare una pagina web, solo la pagina web può avere l'anteprima. Io quando modifico i file vedo il risultato salvando il modello. Per evitare problemi ai lettori del blog puoi fare dei test in un blog di prova
      @#

      Elimina
    5. si infatti alla fine ho fatto così :D peccato che non si possa sarebbe molto più comodo, comunque grazie al tuo aiuto ce l'ho fatta!!!! Ti ringrazio davvero tanto !!

      Elimina
    6. So che magari sto diventando pesante (ahahah) ma potresti dirmi gentilmente se oltre il sottomenu di default si può aggiungere un sottomenu al sottomenu? scusa se ti tartasso di domande giuro che mi iscrivo alla newsletter :)

      Elimina
    7. Non con questo, con quest'altro sì
      http://www.ideepercomputeredinternet.com/2015/08/responsive-multilevel-menu-blogger-mobile.html
      @#

      Elimina

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.