kluster
Dio maturo
Registrato: 15/04/06 12:14
Messaggi: 2898
|
 Inviato: 27 Gen 2008 20:14 Oggetto: * Accordion Menu: Menu con effetto scroll (unobtrusive) |
 |
|
Un menu con effetto Accordion è un menu con apertura a fisarmonica dove man mano che si clicca su un blocco, tutti gli altri si contraggono lasciando solo aperto quello di sezione che viene cliccato.
Questo viene fatto tramite la splendida libreria jquery-1.2.2.pack.js e il suo plugin ddaccordion.js.
(nell'esempio sotto viene dato per scontato che sia l'esempio che i js necessari siano sulla stessa directory)
L'implementazione è unobtrusive (non intrusiva) ossia in presenza di javascript bloccato il menu viene normalmente visualizzato come un elenco puntato.
partiamo dal codice puro dell'elenco
HTML
| Codice: |
<div class="arrowlistmenu">
<h3 class="menuheader expandable">BLOCCO 1</h3>
<ul class="categoryitems">
<li><a href="http://www.tuolink.it/1">Link</a></li>
<li><a href="http://www.tuolink.it/2">Link</a></li>
<li><a href="http://www.tuolink.it/3">Link</a></li>
<li><a href="http://www.tuolink.it/4">Link</a></li>
<li><a href="http://www.tuolink.it/5">Link</a></li>
<li><a href="http://www.tuolink.it/6">Link</a></li>
<li><a href="http://www.tuolink.it/7">Link</a></li>
<li><a href="http://www.tuolink.it/8">Link</a></li>
</ul>
<h3 class="menuheader expandable">BLOCCO 2</h3>
<ul class="categoryitems">
<li><a href="http://www.tuolink.it/9">Link</a></li>
<li><a href="http://www.tuolink.it/10">Link</a></li>
<li><a href="http://www.tuolink.it/11">Link</a></li>
</ul>
<h3 class="menuheader expandable">BLOCCO 3</h3>
<ul class="categoryitems">
<li><a href="http://www.tuolink.it/12">Link</a></li>
<li><a href="http://www.tuolink.it/13">Link</a></li>
<li><a href="http://www.tuolink.it/14">Link</a></li>
</ul>
<h3 class="menuheader" style="cursor: default">BLOCCO NON ESPANDIBILE</h3>
<div>
Contenuto che rimarrà fisso e non verrà ne aperto ne richiuso
</div>
</div>
|
Come si vede è un normale elenco puntato, male che vada seguira' le formattazioni del css e si presenterà nel modo in cui l'avete listato.
Ora aggiungiamo lo script
JAVASCRIPT (commentato per le personalizzazioni)
| Codice: |
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
/* PARAMETRI DA MODIFICARE PER PERSONALIZZARE LO SCRIPT */
ddaccordion.init({
headerclass: "expandable", // la classe dei blocchi che sono espandibili
contentclass: "categoryitems", // la classe che formatta il contenitore dei blocchi di link
collapseprev: true, /* true permette di lasciare aperto il blocco cliccato e chiude tutti gli altri. false lascia aperto */
defaultexpanded: [0], // l'elemento che inizialmente deve essere aperto
// (il primo elemento ha indice 0, il secondo 1 etc)
animatedefault: false, // Il contenuto aperto di default viene animato (true) oppure no in apertura
persiststate: true, /* true mantiene il contenuto aperto nella sessione del browser, false non mantiene
toggleclass: ["", "openheader"], due classi possono essere applicate all'head quando è chiusa e quando è aperta
rispettivamente ["class1", "class2"] */
togglehtml: ["prefix", "", ""], /* contenuto addizionale da aggiungere all'Head (gli h3) quando è chiusa oppure aperta ["positione", "html1", "html2"] */
animatespeed: "normal" // velocità di animazione: "fast" (veloce), "normal" (normale), o "slow" (lenta)
})
</script>
|
l'elemento defaultexpanded: [$INDICE]
è dove dovrete intervenire via serverside (PHP O ASPX che sia) cambiando l'indice in base alla pagina in cui vi trovate (basta avere una variabile in testa alla pagina $indice=[numero] o passare dei parametri in get tramite il link, o controllando proprio via codice in quale script url vi trovate).
ed infine la formattazione degli elementi
CSS (commentato per le personalizzazioni)
| Codice: |
<style type="text/css">
.arrowlistmenu
{
width: 180px; /*larghezza del menu accordion*/
}
.arrowlistmenu .menuheader
{
/*Classe generale degli Header (chiuse o aperte che siano!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /* spazio inferiore che intercorre tra la header ed il resto del contenuto*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /* il testo della header è indentato di 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader
{
/* Classe da applicare alla header espandibile quando è aperta*/
background-image: url(titlebar-active.png);
}
.arrowlistmenu ul
{
/*classe per ogni UL dei blocchi presenti (i sottomenu) */
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /* spazio inferiore tra ogni UL ed il resto del contenuto*/
}
.arrowlistmenu ul li
{
/* formattazione delle singole voci di sottomenu (elementi LI) */
padding-bottom: 2px; /*spazio di separazione tra le voci dei sottomenu*/
}
.arrowlistmenu ul li a
{
/* formattazione dei link dei sottomenu */
color: #A70303;
background: url(arrowbullet.png) no-repeat center left;
display: block;
padding: 2px 0;
padding-left: 19px; /*il testo è indentato di 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited
{
/* formattazione dei link visited (link visitati) dei sottomenu */
color: #A70303;
}
.arrowlistmenu ul li a:hover
{
/* formattazione dei link hover (al passaggio del mouse sopra) dei sottomenu */
color: #A70303;
background-color: #F3F3F3;
}
</style>
|
Per altri esempi di configurazione dello script vedete qui:
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm |
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
