Menù orizzontale o verticale con immagini e effetto slide (Accordion JQuery).

Vado a presentare un nuovo menù un po' diverso dal solito che ha nella grafica la sua maggiore attrattiva. Per avere quindi un buon effetto occorre che le immagini inserite nel menù siano particolarmente curate. Occorre anche avere un modello che non inserisca in modo automatico dei bordi intorno alle stesse immagini, altrimenti l'estetica ne potrebbe risentire. Ho messo in rete un esempio di come potrebbe essere l'aspetto di questo menù. Ho utilizzato immagini in formato PNG con sfondo trasparente ma forse sono da preferire le immagini in JPG senza trasparenze.

• Demo Menù Orizzontale e Verticale Accordion -

Menù Orizzontale Popup con Immagini per Blogger.

Utilizzando i javascript e i CSS di un menù che ho già presentato vediamo come sia possibile crearne un altro di forma orizzontale con una serie di immagini a rappresentare le singole categorie. Il concetto è quello di vedere un popup di un menù verticale quando si punta con il mouse una singola immagine. Evidentemente le foto inserite dovranno essere personalizzate e avere attinenza con le voci secondarie che saranno viste nel relativo menù. Mi rendo conto che è più difficile spiegarlo a parole che realizzarlo in pratica. Ecco la

• Demo del Menù Orizzontale con Immagini -

Quando passerete con il mouse sopra una delle sei immagini, apparirà il popup del menù che sarà diverso a seconda della foto puntata

Come aggiungere link al widget delle pagine statiche per creare un menù.

In Blogger, dopo l'introduzione delle pagine statiche, si può creare un menù orizzontale formato proprio da tutte quelle pagine che sono state pubblicate e che possono arrivare fino a dieci. Il menù che si viene a creare può essere inserito in senso orizzontale sotto l'intestazione o in senso verticale in una sidebar. C'è anche la possibilità di non associare alcun widget alle pagine statiche che è stata la scelta di questo blog. Blogger non dà nativamente la possibilità di inserire dei collegamenti a degli URL che non siano di pagine statiche di quello stesso blog.

Vediamo come sia possibile ovviare a questo problema e di come si possa creare un menù orizzontale molto efficiente e semplice da realizzare. Per prima cosa dobbiamo aver pubblicato almeno una pagina statica e averla salvata nel widget orizzontale. Andiamo adesso su Design > Modifica HTML e salviamo il modello completo. Dopo aver messo la flag a espandi modelli widget cerchiamo questo codice

Menù orizzontale su più livelli per Blogger personalizzabile e funzionante anche con i template del Designer Modelli.

Ho presentato diversi menù per la precedente generazione di template di Blogger. Con l'avvento del Designer Modelli, alcuni di questi non sono più visualizzati correttamente. Mi ripropongo di ripresentarli in una versione universalmente funzionante in un prossimo futuro.

Adesso illustro il procedimento per l'installazione di un menù a beneficio di blogger che hanno l'esigenza di collegare molte pagine in home page. E' molto simile al menù multilivello e ne ricalca in qualche modo la struttura. Ci sono una serie di titoli principali al di sotto dei quali possono essere inserite delle voci secondarie su più livelli

• Demo del MattBlackMenù orizzontale -

Se si interagisce con il mouse ecco come si presenta il menù

Menù orizzontale con casella di ricerca per Blogger.

Questo menù ha la particolarità di avere, oltre alle voci, anche una sezione dedicata alla ricerca di articoli interni al blog inserendo delle opportune keyword. Ho pubblicato una demo nel web e potete visualizzarlo direttamente

• Demo del menù orizzontale con ricerca -

L'aspetto è visibile anche in questo screenshot. Non ho inserito collegamenti attivi ma il suo funzionamento è intuibile

Il colore di base è il grigio che diventa azzurro quando si punta un elemento con il mouse. I colori sono dati da una immagine quindi non possono essere cambiati senza modificare quest'ultima. Cosa comunque fattibilissima. Per l'installazione andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

Come inserire un menù orizzontale drop-down nei blog su Blogger.

Ho già pubblicato un post sul Menù Chrome che attualmente è visibile in questo blog. Il menù è stato realizzato utilizzando degli script di Dynamic Drive e può essere personalizzato nei colori attraverso la scelta tra quattro opzioni diverse e caricando le rispettive immagini che ne determinano l'aspetto. Si può fare riferimento a un altro articolo che ho pubblicato come tutorial sulla configurazione del menù Chrome. 

Nel codice che ho postato e nella demo, il colore prescelto era stato il verde ma ho avuto molte richieste per un menù che sia in tutto e per tutto uguale a quello di questo blog

con una serie di sette voci principali e varie voci secondarie per ciascuna di esse. E' superfluo dire che si può avere un menù con un numero indefinito di voci principali e secondarie, basta mantenere la stessa sintassi per creare ciascuna di esse o eliminare quelle in soprannumero.

Megamenù: alternative per l'installazione nei diversi modelli di Blogger.

Il Megamenù orizzontale che ho presentato ieri ha avuto un discreto riscontro tra i lettori. C'è chi lo ha installato senza problemi e chi invece non è riuscito nel compito perché ha un blog con un modello vecchio. Credo sia opportuno fare delle precisazioni per aiutare più persone possibili che siano interessate a inserirlo nel template.

1. Ho testato il menù solo su alcuni nuovi modelli e su un vecchio template che ho in Bacheca per fare dei test. Si tratta del modello Tekka. Non posso quindi affermare se il menù sia installabile o meno in altri modelli del passato perché non ho a disposizione il file XML per poter effettuare dei test. Posso solo dire che lo è certamente nel modello Simple del Designer Modelli e in tutti gli altri che da questo derivano .
2. Prima di tentare di inserire il menù, è bene salvare il modello e togliere eventuali altri menù che siano presenti. Non mi riferisco solo al gadget HTML/Javascript ma soprattutto agli script e ai CSS incollati nel modello sopra alla riga </head>. Tali javascript potrebbero interferire con quelli di questo menù, anzi è probabilissimo che lo facciano.
3. Nel caso che il menù non si visualizzasse correttamente anche con l'installazione dopo aver fatto pulizia menù precedenti, si può provare la seguente installazione alternativa che ha anche il pregio di poter personalizzare i colori dello stesso menù.

Andate quindi su Design > Modifica HTML e salvate il modello. Cercate la riga
]]></b:skin>
e, immediatamente sopra, incollate il seguente codice

Menù Orizzontale per template creati con il Designer Modelli di Blogger.

Mi sono cimentato spesso nella realizzazione di menù. Ne ho presentati a soffietto, laterali estendibili, estendibili su tre lati, orizzontali e multilivello. Il concetto è stato sempre quello di caricare i file javascript e CSS in un hosting esterno. Con i nuovi modelli creati con lo strumento Designer di Blogger, alcuni di questi codici non funzionano più. Sarà mia cura nei prossimi post di trovare delle alternative per chi ha scelto questa nuova opzione.

Oggi presento un menù orizzontale che ha però caratteristiche particolari. E' stato creato utilizzando la libreria JQuery con un occhio, se non tutti e due, agli utilizzatori di Wordpress e ai siti di presentazione di prodotti e brand commerciali. Ho modificato alcune cose per adattarlo a Blogger. Ecco uno screenshot di come si presenta

Come inserire in un blog su Blogger un menù orizzontale multilivello.

Dopo numerose richieste sull'argomento e dopo che mi è stato fatto notare che su Dynamic Drive esiste un menù di questo tipo mi sono riproposto di presentarlo sicuro che incontrerà il gradimento di molti blogger. Prima di iniziare la personalizzazione andate a vedere il post sul menù multilivello nel mio blog di prova.

Come vedete si possono inserire tutti i livelli che si vogliono con tutti i sottomenù che ci servono. Nell'immagine precedente sono arrivato fino a quattro ma si possono anche inserirne di nuovi con il metodo classico della nidificazione dei tag. Di default lo sfondo del menù è di colore grigio ma ovviamente può essere adattato al nostro blog.

Andiamo su Layout > Modifica HTML e scarichiamo il modello completo. Cerchiamo la riga

</head>

e, immediatamente sopra, incolliamo il seguente codice

<!--MENU MULTILIVELLO INIZIO-->
<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/javascript-2/jqueryslidemenu.js"></script>
<!--MENU MULTILIVELLO FINE-http://www.ideepercomputeredinternet.com/-->

Salviamo il modello. Adesso andiamo su Layout > Elementi pagina > HTML/Javascript e incolliamo il menù vero e proprio che potrà avere un codice di questo tipo

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.ideepercomputeredinternet.com">Home</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html">Crea Blog</a></li>
<li><a href="#">Risorse Blogger</a>
<ul>
<li><a href="http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">96 risorse per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/altre-16-risorse-per-blog-su-blogger.html">99 Risorse per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html">Guadagnare con un blog</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/02/elenco-di-tutorial-per-inserire-bottoni.html">Bottoni di voto</a></li>
</ul>
</li>
<li><a href="#">Widget e Menu</a>
<ul>
<li><a href="http://www.ideepercomputeredinternet.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html">Widget Benvenuto</a></li>
<li><a href="#">Widget</a>
<ul>
<li><a href="http://www.ideepercomputeredinternet.com/2010/02/aggiungere-il-widget-degli-ultimi-post.html">Ultimi Articoli</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/02/il-widget-degli-ultimi-commenti-per.html">Ultimi Commenti</a></li>
<li><a href="#">Menù</a>
<ul>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-creare-un-menu-espandibile-da.html">Menù a soffietto</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-inserire-un-menu-laterale-tendina.html">Menù Laterale</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-inserire-tre-menu-scorrevoli.html">Tre menù</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/01/come-inserire-un-menu-orizzontale.html">Menù orizzontale</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/12/il-fantastico-widget-dell-con-il.html">Archivio con calendario</a></li>
</ul>
</li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/01/come-inserire-il-widget-degli-ultimi.html">Ultimi post con miniature</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Altro</a>
<ul>
<li><a href="http://videoblog32.blogspot.com/">Videochat gratis</a></li>
</ul>
</li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">Disclaimer e Privacy</a></li>
</ul>
<br style="clear: left" />
</div>

Istruzioni per creare più livelli di menù -

Il concetto è quello di partire dalla struttura base cioè con le voci principali che faranno parte della prima riga. Si parte quindi da un codice di questo tipo

<div id="myslidemenu" class="jqueryslidemenu">
<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>
</ul>
<br style="clear: left" />
</div>

dove al posto degli asterischi possono essere messi (eventualmente) gli URL dei collegamenti. Se si vuole creare un menù di livello più basso, per esempio nella Voce 2, si inserisce un codice di questo genere

<ul>
<li><a href="#">Voce 2.1</a></li>
<li><a href="#">Voce 2.2</a></li>               
<li><a href="#">Voce 2.3</a></li>
<li><a href="#">Voce 2.4</a></li>
<li><a href="#">Voce 2.5</a></li>
</ul>

tra il tag </a> e quello </li>. Viene cioè una cosa di questo tipo

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a>
<ul>
<li><a href="#">Voce 2.1</a></li>
<li><a href="#">Voce 2.2</a></li>
<li><a href="#">Voce 2.3</a></li>
<li><a href="#">Voce 2.4</a></li>
<li><a href="#">Voce 2.5</a></li>
</ul>
</li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
<br style="clear: left" />
</div>

dove il codice del sottomenù è stato evidenziato di rosso e le tag tra le quali è stato inserito sono in grassetto e evidenziate di viola. Si possono inserire altri sottomenù con lo stesso metodo. Basterà inserire il codice del sottomenù per esempio all'interno della Voce 2.3 con una struttura siffatta

<li><a href="#">Voce 2.3</a>
Codice sottomenù
</li>

Se si vuole personalizzare il colore del menù bisogna scaricare il foglio di stile relativo che si trova a questo indirizzo

http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css

aprirlo con Notepad++ se modificarlo. I parametri da  modificare sono:

1. Il colore di sfondo che di default è #414141;
2. La grandezza dei caratteri (13 pixel) e la famiglia di font
3. Il colore della voce quando è puntata con il mouse; senza modifiche è black

Dopo averlo modificato e averlo rinominato in CSS deve essere caricato su un hosting che supporti gli script come Google Sites. Dopo averne acquisito l'indirizzo si sostituisce a quello del file che abbiamo scaricato. Questo menù multilivello è stato testato con tutti i browser più recenti e non dà alcun problema di visualizzazione.

Aggiornamento n°1: Se si vogliono togliere la freccia verticale e quella orizzontale destra, bisogna aprire il file http://sites.google.com/site/ideepercomputeredinternet/menu-multilivello/jqueryslidemenu.css, cercare i blocchi di codice che riguardano le due frecce e che sono

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
display:none;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
display:none;
}

quindi inserire le due righe display:none; salvarlo e caricarlo su un nostro hosting. Si può anche  togliere una sola freccia (p.e. quella verticale), incollando una sola riga. Si deve acquisire l'URL del file e sostituirlo nel codice da incollare nel modello.

Aggiornamento n°2 - Se si ha un blog con dominio personalizzato del tipo www.esempio.com bisogna caricare i javascript su DropBox o su un hosting personale.

Fonte | Dynamic Drive -

---

Come inserire uno script di un menù o di una personalizzazione direttamente nel modello.

Forse qualcuno tra coloro che mi seguono direttamente nel blog e non solo attraverso i feed si sarà accorto che da qualche giorno ho cambiato menù inserendo un menù orizzontale. Ho caricato i due file javascript e CSS in una pagina schedario di Google Sites. Purtroppo ho avuto dei problemi e c'è stato qualche ora di non accessibilità dei file che si è tradotta in una estrema difficoltà di caricamento del sito e in una non usabilità.

Per ovviare a questo inconveniente ho quindi deciso di caricare i due file direttamente nel modello di Blogger quindi per il futuro

1. Non ci saranno problemi di accessibilità dell'hosting dei file
2. Ci sarà una larghezza di banda illimitata. In Google Sites non è specificata quanto sia ma in questo modo non ci saranno più problemi al riguardo

Illustrerò questo metodo di inserimento basandomi sul mio precedente articolo

• Come caricare file javascript direttamente nel template di Blogger -

Il codice del Menù orizzontale ha essenzialmente due file da caricare che sono

http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome.css   e

http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome.js

Per il resto si tratta solo di commenti e di credits. Il primo file determina lo stile del menù mentre il secondo è il Javascript. Ho incollato gli URL nel browser e gli ho scaricati entrambi. Gli ho aperti con Notepad++ ma chi ne fosse sprovvisto li può tranquillamente rinominare in .txt e aprirli con il Blocco Note.

Il file CSS l'ho incollato immediatamente sopra la riga di codice

]]></b:skin>

e l'ho inserito in mezzo a due commenti (non è comunque indispensabile e si può incollare così com'è)

<!--Inizio Menu Chrome-->
Codice del file
<!--Fine Menu Chrome-->

tanto per sapere dove andare a cercare in fase di successive modifiche. Ecco uno screenshot esplicativo

 

 

mentre il file Javascript l'ho dapprima incollato in un file di testo secondo questa sintassi

<script type='text/javascript'>
//<![CDATA[

CODICE JAVASCRIPT

//]]>
</script>

quindi ho incollato il tutto immediatamente sopra la riga

</head>

Ecco il consueto screenshot

Anche in questo caso può essere utile inserire dei commenti di inizio e fine codice per riconoscere i vari blocchi nel caso ci fosse bisogno di intervenire. Prima di salvare il modello ho ovviamente cancellato il codice del menù che era presente precedentemente e che avevo inserito con le modalità di questo articolo.

Il codice del menù vero e proprio inserito in un elemento HTML/Javascript è rimasto esattamente lo stesso e non è stato toccato.

Ho illustrato questo metodo per un caso specifico ma può essere usato se siamo in presenza di una personalizzazione che abbia bisogno di un file esterno .css, o di un file .js oppure di tutti e due proprio come è successo in questo caso. Se ci fossero due file javascript possono comunque essere caricati entrambi uno di seguito all'altro, ciascuno di essi racchiuso dalle quattro linee di codice di cui sopra.