Menù Responsive per desktop e mobile di Blogger su due livelli

Come installare e personalizzare su Blogger un Menù Responsive due livelli per desktop, tablet e smartphone

Da quando la visualizzazione per il mobile è diventata fondamentale per il traffico di un sito e per la sua usabilità da parte degli utenti, è importante che ogni funzionalità aggiunta sia accessibile da desktop e da mobile.

Gli utenti di Blogger possono da qualche tempo utilizzare i modelli ufficiali responsive oppure installare uno dei tanti Temi Responsive disponibili nel web. Chi ancora usa un Tema di Blogger non Responsive, quando deve pensare al menù, può sostanzialmente seguire due strade.

La prima è quella di installare due menù separati per mobile e per desktop, e inserire i tag condizionali per mostrarli a seconda del dispositivo con cui viene aperto il sito. La seconda è quella di usare un menù responsive che si adatti automaticamente alla risoluzione del dispositivo.

Ho già mostrato diversi menù di Blogger per desktop e mobile tra cui anche qualcuno responsive. In questo post vedremo un menù che si adatta automaticamente alla risoluzione del dispositivo con cui viene aperto e che ha una forma classica quando viene aperto da desktop, e un aspetto più compatto se aperto da mobile.

Avevo già presentato questo menù ma mi sono visto costretto a riprendere quel vecchio post perché gli hosting utilizzati per il codice non sono più disponibili. Il layout del menù da desktop è il seguente:

Se invece si apre il sito con uno smartphone, il menù su due livelli assume quest'altro layout

menù-smartphone

La visualizzazione da tablet è ancora diversa e assume questo aspetto

menù-tablet

Dopo aver pubblicato i codici con cui creare questo menù, metterò i link anche alle demo per visualizzare tutte e tre le versioni del menù. Prima di iniziare occorre andare su Tema -> Backup/Ripristino per salvare il modello.

Nel codice del Tema di Blogger ci sono alcune righe base e il codice di questo menù deve essere inserito avendo queste righe come punto di riferimento. Ecco lo schema che si deve seguire:

... Codice primo blocco ...

</head>
<body expr:class='"loading" + data:blog.mobileClass'>

... Codice secondo blocco ...

<div id='wrapper'>
...Codice del template del modello iniziale ...
</div>

... Codice del terzo blocco ...

</body>

Le righe evidenziate di giallo sono quelle già presenti nel Tema di Blogger e devono essere cercate con Ctrl+F mentre quelle evidenziate di verde devono essere aggiunte dal webmaster. I tre blocchi di codici necessari alla installazione del menù si potranno trovare nel seguito dell'articolo.

PASSO 1

Per prima cosa si trova la riga </head> e, subito sopra a questa, si incolla il primo codice

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

<link href='https://sites.google.com/site/progetto3322/archivio/hybridmenu.css' rel='stylesheet'/>

Si salva il Tema una prima volta.

PASSO 2

Si cerca la riga

<body expr:class='"loading" + data:blog.mobileClass'>

e, subito sotto, a questa si incolla la riga

<div id='wrapper'>

quindi si cerca la riga </body> e, subito sopra a questa, si incolla la riga

</div>

Si salva il modello per una seconda volta. Questo passaggio è fondamentale per spostare in orizzontale il contenuto della pagina quando il menù venga aperto in modalità dispositivo mobile.

PASSO 3

Si incolla il codice vero e proprio del menù subito sopra alla riga <div id='wrapper'> appena aggiunta. Ecco un esempio di codice con 6 voci principali che possono essere diminuite o aumentate con la stessa sintassi.

<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='#' title='Titolo Logo'>
     <img alt='nome-logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ1pT_HCVyTFf0dx2ZiX47eeYv0BGPRhcpaTAO6cFhJWRw7_GJy2xfxocvZlNMAEpDNuYN7NuurC4QwKfHHts7ua2SODzCgZnQYePVPGx4m5khX4RCC5TSEFW3RkHlneTT1dg9vZcjOnld/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='parent'>
   <a href='#'><i class='fa fa-gear'/><span>Menu Elemento 4</span></a>
</li>
<li class='menu-right parent'>
   <a href='#'><i class='fa fa-phone'/><span>Menu Elemento 6</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 5</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>

Da notare che gli ultimi due elementi vengono posizionati in ordine inverso (Elemento 6 prima di Elemento 5). Al posto dei cancelletti (#) si mettono gli indirizzi dei collegamenti e al posto del testo colorato di blu, le voci che vogliamo visualizzare nel menù. L'URL della immagine colorata di viola è il logo di questo blog che deve essere sostituito con il logo del vostro sito. Il logo può essere caricato su Google seguendo le istruzioni di questo post.

PASSO 4

Si cerca ancora la riga </body> e, subito sopra a questa, si incolla quest'ultimo codice

<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://sites.google.com/site/progetto3322/archivio/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>

Finalmente si salva il Tema per l'ultima volta.

CONSIDERAZIONI CONCLUSIVE

Ho caricato un file CSS e un javascript su Google Sites che funzioneranno nei blog blogspot.com ma potrebbero non funzionare nei blog con domini personalizzati. I file in questione hanno URL colorato di viola

https://sites.google.com/site/progetto3322/archivio/hybridmenu.css
https://sites.google.com/site/progetto3322/archivio/hybridmenu.js

Chi ha un blog con dominio personalizzato potrà scaricarli incollandone l'URL nel browser e andando su Invio. Tali file potranno essere caricati su un hosting gratuito come Firebase, sempre di proprietà di Google. Alternativamente si può creare un link di download su Google Drive o sempre un link di download su Dropbox. Gli URL ottenuti da tali servizi, vanno sostituiti nel codice a quelli colorati di viola.

Per modificare l'aspetto del menù si deve aprire il file

https://sites.google.com/site/progetto3322/archivio/hybridmenu.css

con un Editor quale Notepad++ e modificare codici dei colori, dimensioni, famiglie di font e altri elementi. Dopo le modifiche, il file va caricato su Firebase, Google Drive o Dropbox per ottenerne il link diretto da sostituire nel primo blocco di codice. Ecco qui di seguito le Demo ottenute con Screenfly.

Demo
Clicca qui

Pubblicato il 10/04/18 - aggiornato il | Nessun commento :