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.

Nel caso in cui questo menù avesse un certo successo, si potrebbe porre il problema del superamento della larghezza di banda. Ho quindi pensato di caricare il file javascript su Google Code, segnatamente su Google Code Project Hosting che offre 2GB di spazio gratuito per caricare file open source. Non ho trovato un riferimento alla larghezza di banda che quindi presumo sia illimitata. Credo che sfrutterò l'account che mi sono creato, Idee per Computer ed Internet Script, per caricare alcuni file di widget o menù che andrò a presentare nel futuro. E' probabile che vi sposti anche quelli di altri hosting nel caso ci fossero dei malfunzionamenti.

In questo servizio di Google non mi risulta sia possibile caricare i file CSS che ho allora hostato sul sempre affidabile Google Sites attraverso l'opzione Schedario. Terminato questo lungo preambolo ecco il codice da incollare immediatamente sopra alla riga </head> in Design > Modifica HTML

<!-- Inizio Menu Chrome -->
    <link href='https://sites.google.com/site/ideepercomputeredinternet/script-1/red-chrome.css' rel='stylesheet' type='text/css'/>
    <script src='http://idee-per-computer-ed-internet-script.googlecode.com/files/red-chrome.js' type='text/javascript'>
    </script>
    <noscript><a href='http://goo.gl/uOfIK' target='_blank'><span style='font-size: x-small;'>Menu Orizzontale</span></a></noscript>
    <!-- Fine Menu Chrome --> 

Adesso andate nella parte bassa del modello e, subito sopra al tag </body>, incollate il seguente codice

<script type='text/javascript'>
    cssdropdown.startchrome(&quot;chromemenu&quot;)
    </script>

Salvate il modello e passare alla configurazione del menù. Ricordo comunque che prima di ogni modifica all'HTML del template è buona norma "Salvare il modello completo" per un eventuale backup. Per agevolare il compito ho pubblicato su Google Documenti il codice del menù che uso in questo momento

• Esempio di codice di menù orizzontale -

Non vi resta che sostituire i nomi delle voci e gli URL di questo blog con quelli vostri. Come detto si possono aggiungere anche altre sezioni. Basta inserire nel primo blocco di codice, una riga come questa

<li><a href="#" rel="dropmenu8">Nome Sezione</a></li>

E' necessario inserire anche il numero della sezione per poi creare le voci secondarie relative

<!--8rd drop down menu -->                                                     
<div id="dropmenu8" style="width: 140px;" class="dropmenudiv">
<a href="URL_articolo1">Voce secondaria 1</a>
<a href="URL_articolo2">Voce secondaria 2</a>
</div>

Alcune precisazioni:

1. Al posto del cancelletto (#) può essere inserito un URL se si vuole collegare la voce principale a una data pagina come nel caso della Home
2. Bisogna ricordarsi di creare corrispondenza tra il numero della voce principale (dropmenu8) e quello dell'id delle voci secondarie che devono visualizzarsi al di sotto di essa
3. Si può personalizzare la larghezza di una data voce principale agendo su width e modificando il numero di pixel
4. In alcune voci ho inserito l'attributo target="_blank" per aprirle in un'altra scheda. E' una opzione utile se si linkano pagine esterne anche se pare sia deprecata dal W3C.

Dopo aver creato il menù in un file di testo, si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito senza inserire il titolo. Dopo averlo salvato si posiziona mediante trascinamento con il mouse nella posizione desiderata.

Si clicca su Salva e si visualizza il blog per controllare che la modifica sia andata a buon fine. Mi risulta per alcuni dei modelli più attuali questo menù abbia delle difficoltà a funzionare. Quindi se siete sicuri di aver seguito alla lettera il procedimento di installazione e il menù non si visualizza correttamente, significa che c'è una incompatibilità con il vostro template. Prima di provare il funzionamento è comunque opportuno disinstallare altri menù che potrebbero essere presenti nel vostro blog.