Newsgroup: it.lavoro.professioni.webmaster
Titolo: Menu accordion nidificato con effetto

Salve, mi rendo conto che questo non è il NG più idoneo per il mio post, 
eventualmente siate gentili e segnalatemene uno dove posso ripostare la 
richiesta.
Mi è stato chiesto di realizzare un menu accordion nidificato (tre 
livelli) con un effetto quando compaiono le sottovoci analogo a quello 
che vedete in questo sito: 
http://www.matteothun.com/
Ho esaminato il codice di pagina e ho concluso che è stato sviluppato 
uno script apposito.
Non conosco Javascript, quindi di solito uso jQuery con i suoi plugin. 
Il problema è che ho fatto passare un gran numero di accordion in js, 
per jQuery, per Mootools ... ma non ne ho trovato nessuno che abbia 
quell'effetto di "squeeze" (per così dire) sulle voci.
Avete qualche dritta al riguardo?
Grazie e - intanto che ci siamo - buon weekend,
Paolo

 Paolo
Con jQuery è molto semplice:
<a href="#" onclick="return false;" id="cliccami">Cliccami</a>
<ul id="elementi" style="display:none;">
  <li><a href="elemento1.html">elemento 1</a></li>
 <li><a href="elemento2.html">elemento 2</a></li>
 <li><a href="elemento3.html">elemento 3</a></li>
</ul>
<script>
    $("#cliccami").click(function () {
      $("#elementi").slideToggle("slow");
    });
</script>
-- 
http://www.maxori.it
L'Arte è la capacità di fare cose di nessun valore
e di riuscire a venderle
F. Zappa


Ti ringrazio molto della risposta.
Purtroppo però manca l'effetto sulle sottovoci quando viene cliccata la 
voce principale che hanno ottenuto nel sito che ho indicato e che, per 
il cliente, sembra essere decisiva ...
Paolo

 wrote:

Nella pagina che hai indicato non ho visto dei sotto-elementi, comunque
lo stesso codice lo puoi nidificare, basta inserire gli elementi
necessari e scrivere il codice giusto:
<a href="#" onclick="return false;" id="cliccami">Cliccami</a>
<ul id="elementi" style="display:none;">
  <li><a href="elemento1.html">elemento 1</a></li>
  <li><a href="elemento2.html">elemento 2</a></li>
  <li><a href="elemento3.html"><a href="#" onclick="return false" id
="cliccami2">elemento 3</a>
   <ul id="subElement1" style="display:none;">
   <li><a href="elemento1.html">Sub elemento 1</a></li>
   <li><a href="elemento2.html">Sub elemento 2</a></li>
</ul>
<script>
    $("#cliccami"2).click(function () {
      $("#subElement1").slideToggle("slow");
    });
</script>
</li>
</ul>
<script>
    $("#cliccami").click(function () {
      $("#elementi").slideToggle("slow");
    });
</script>
Max



Grazie ancora Max. Però ... c'è un però: clicca sulla prima voce in alto 
ARCHITECTURE del menu nel sito 
http://www.matteothun.com/
 e guarda bene 
le voci: l'effetto è che queste sono attaccate le une alle altre, e si 
distanziano verticalmente man mano che compaiono.
Questo è l'effetto che ha colpito il mio cliente e che lui vorrebbe 
replicato (alla faccia dell'originalità).
Buona giornata,
Paolo

 wrote:

Il codice che ti ho dato ha lo stesso effetto.
Perlomeno nei siti dove l'ho usato io non vedo diferenze, anche perchè è
lo stesso plugin di jquery: collassable.js
Se hai delle differenze posso essere causate o dal css oppure dal fatto
che gli elementi non sono delle liste.
Se vai qui:
http://www.wallstreetinternational.info/beta/it/browse-by-continent/euro
pe/italy/galleria-boxart.html
Se scrolli in basso fino a trovare "more 8 article/s" lo vedrai in
funzione.




Dunque va caricata anche la libreria di questo plugin oltre a quella di 
jQuery?
Se è così, capisco il motivo per il quale non vedo l'effetto.
Tuttavia nella pagina che mi hai indicato, non vedo il link al plugin 
collapsable.js quindi confesso di non raccapezzarmi molto.
Oltre a ringraziarti, ti faccio i complimenti per le tue molteplici 
attività e, in particolare, quella musicale. Purtroppo non sono delle 
tue parti altrimenti verrei a vederti suonare.
Paolo