Ho un menù realizzato con list e vorrei che al clic su determinati bottoni si aprissero dei sottomenù (realizzati anch'essi con list) scorrendo verso il basso. Come posso creare questo effetto "scorrimento"?
Printable View
Ho un menù realizzato con list e vorrei che al clic su determinati bottoni si aprissero dei sottomenù (realizzati anch'essi con list) scorrendo verso il basso. Come posso creare questo effetto "scorrimento"?
Ciao dovresti utilizzare JQuery, un codice base potrebbe essere:
Una volta scritto questo script dovrai passargli il tempo di "attesa" nel tuo html e determinare lo spazio dove dovrà apparire:Codice HTML:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
function Cascade(delay){
// Clear the existing elements as
// we're doing this muliple times.
$('#cascade').html('');
// Initiate an array
var items = ['Testo1','Testo2','Testo3',];
// Loop through it with jQuery.each()
$(items).each(function(i, html){
// Create a new DIV.
item = $('<div></div>');
// Give it a class for styling
$(item).addClass('item');
// Add our html code from the array.
$(item).html(html);
// Make it so it doesn't display
// when it's added to the DOM.
$(item).css({ //CSS a caso, solo per farti capire
'display': 'none',
'font-size': '1em',
'padding-top': '5%',
})
// Tell jQuery to delay the fadeIn by i * delay,
// (no. times loop has iterated) * (delay in ms)
$(item).delay(i * delay).fadeIn();
$('#cascade').append(item);
});
}
</script>
In questo modo dovrebbe andare, essendo un codice "lungo" se non capisci qualcosa dimmelo ed evito di spiegarlo tutto casomai :tongueCodice HTML:<button onclick="doCascade(150)">
<!-- All'interno della parentesi passi il parametro che determinerà il tempo di scorrimento -->
<span>Schiaccia per far apparire</span>
</button>
<div id="cascade">
</div>
Ma se io ho
Devo farlo diventareCodice:<li>Voce1</li>
<li>Sottovoce1</li>
<li>Sottovoce2</li>
?Codice:<li onclick="doCascade(150)">Voce1</li>
<div="cascade">
<li>Sottovoce1</li>
<li>Sottovoce2</li>
</div>
Mi era stato detto che non vanno inseriti div all'interno del list...
Ciao, nono.. dovresti lasciare l'html come ti ho postato sopra e modificare l'array (una possibile soluzione) in questo modo:
Fammi sapere :tongueCodice HTML:var items = ['<li>Sottovoce1</li>','<li>Sottovoce2</li>'];
Credevo di avercela fatta...ma ho appena scoperto che su InternetExplorer (versione 10) non funziona...cosa posso fare?
LINK: cliccando su poesia dovrebbe scendere il sottomenù ma con IE non succede niente...