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:
- Il colore di sfondo che di default è #414141;
- La grandezza dei caratteri (13 pixel) e la famiglia di font
- 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 -
