Menù orizzontale a 2 livelli per Blogger con Design Responsive per una corretta visualizzazione anche da dispositivi mobili.
AGGIORNAMENTO: Questo menù è stato presentato nuovamente con un codice nuovamente funzionante con file caricati su Google Sites.
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.
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.
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
Nei tablet invece il menù presenterà un aspetto ancora leggermente diverso
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='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<!-- File CSS per personalizzare aspetto menu --> <link href='https://sites.google.com/site/progetto3322/archivio/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 -->
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<!-- File CSS per personalizzare aspetto menu --> <link href='https://sites.google.com/site/progetto3322/archivio/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
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='"loading" + data:blog.mobileClass'>
<div id='wrapper'>
... Codice della parte visibile del blog ...</div>
</body>
<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='"loading" + 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://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='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 -->
<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://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='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='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
<script src='https://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>
<!-- Script Responsive Menu Fine -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
<script src='https://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>
<!-- 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='"loading" + 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>
... Codice primo blocco ...
<!-- Menu Responsive Fine -->
</head>
<body expr:class='"loading" + 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.
scusa la ia ignoranza ma come faccio a scaricare e modificare il css che è stato caricato su google drive?
RispondiEliminaPer 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++
Eliminahttp://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
@#
ti ringrazio tanto Ernesto :) sei gentilissimo, ti farò sapere se grazie a te riuscirò a combinare qualcosa ;)
Eliminaah 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
EliminaMi 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@#
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 !!
EliminaSo 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 :)
EliminaNon con questo, con quest'altro sì
Eliminahttp://www.ideepercomputeredinternet.com/2015/08/responsive-multilevel-menu-blogger-mobile.html
@#
grazie di cuore :)
EliminaCiao Ernesto,dove sbaglio?
RispondiEliminahttps://provamenublog.blogspot.it
Non è colpa tua. Google Drive non offe più un hosting per i javascript, quindi non può funzionare. Salvo l'URL del post, poi quando ho un po' di tempo lo riscrivo usando un nuovo hosting
Elimina@#
Ok grazie
RispondiElimina