Bellissimo Menu Circolare da installare su Blogger.

Ho presentato menu di tutti i generi e adatti a quasi tutte le esigenze. Ci sono quelli semplicissimi particolarmente amati dai principianti e quelli più complessi che vengono usati principalmente dai blogger più esperti. I miei lettori hanno potuto scegliere tra una vasta gamma di menù orizzontali o verticali, con una sola linea di navigazione o strutturati su più livelli, posizionati nella parte alta, nella sidebar oppure con effetto slide sulla parte sinistra o destra del layout.

E' però sicuramente la prima volta che passo a illustrare la procedura di installazione di un menù che ho denominato "circolare" perché, se si passa con il mouse sopra l'immagine centrale, si aprono in senso orario o antiorario tutta una serie di altre immagini debitamente collegate ai vari post o alle varie etichette del blog. L'utilizzo di questo menù potrebbe interessare soprattutto coloro che hanno diverse gallerie fotografiche a loro volta inserite in delle pagine statiche. Tutte queste gallerie potrebbero essere riunificate in un'altra pagina statica attraverso questo Menu Circolare. Un'altra possibilità che mi viene in mente è quella di usare come link le etichette del blog quando queste sono in numero non eccessivo, per esempio in un blog di cucina possono essere così organizzate le ricette degli antipasti, primi piatti, secondi, contorni, dessert, dolci, ecc.

• Demo del Menù Circolare -

 

Il menù si basa su un plugin JQuery denominato Mobilyblocks. Per la sua installazione per prima cosa si salva una copia del template per sicurezza quindi  si va su Modello > Modifica HTML > Procedi, si cerca la riga </head> e, subito sopra, si incolla il codice che ho postato su Google Documenti

• Codice del Menù circolare Mobily Blocks -

I dati da personalizzare riguardano la immagine centrale il cui URL deve essere incollato al posto di quello colorato di rosso. Si tratta di una immagine in formato PNG di 150x150 pixel con solo la parte centrale circolare visibile. Se volete adattare una vostra foto potete usare Gimp che permette di eliminare la parte esterna di un cerchio rendendola trasparente usando lo steso metodo per cancellarne lo sfondo. Gli altri parametri da configurare sono

trigger: 'hover', // click  o hover per aprire il menu con un click o puntando con il cursore
direction: 'clockwise', // clockwise o counter per direzione oraria o antioraria
duration:500, // durata in millisecondi della animazione
zIndex:50, // valore in z-index degli elementi li
widthMultiplier:1.30 // moltiplicatore della larghezza per inserire più elementi

dove per ciascuno è indicato il significato del parametro. Riguardo all'ultimo parametro, l'autore, che aveva inserito solo sei immagini, aveva messo widthMultiplier:1.15. Avendo messo nella demo otto foto, ho aumentato la dimensione del menù che può essere aumentata ulteriormente o anche diminuita. Dopo aver salvato il modello si passa alla realizzazione del menù che può essere incollato in Layout > Aggiungi un gadget > HTML/Javascript oppure incollato in Modalità HTML in una pagina statica andando su Pagine > Nuova Pagina > Pagina vuota. Ho postato un codice di esempio sempre su Google Documenti 

• Codice di esempio del menù circolare - 

I tag <br/> iniziali e finali sono dei salti di riga che servono per dare lo spazio necessario al menù di dispiegarsi, possono essere aumentati o diminuiti a seconda delle esigenze. Se si tolgono tutti i <br/>, il menù si espanderà ugualmente sopra agli elementi adiacenti; se così non fosse e si riuscisse solo a intravedere sotto questi ultimi, si potrà sempre aumentare il valore numerico del parametro z-index.  La struttura di ogni voce del menù è la seguente

<li style="top: 0px; left: 0px; z-index: 49;">
<a href="URL COLLEGAMENTO">
<img alt="NOME IMMAGINE" src="INDIRIZZO IMMAGINE" title="NOME LINK"/>
</a>
</li>

dove le parti in rosso devono essere sostituite dagli indirizzi delle immagini e dai collegamenti che abbiamo scelto. Ricordo che anche queste immagini hanno una dimensione 150x150 pixel con la parte esterna al cerchio centrale di uguale diametro che è stata resa trasparente. Il NOME LINK è particolarmente importante perché è quello che visualizzeranno i navigatori quando passeranno sopra con il mouse alla rispettiva immagine.