menu multilivello

[Prof_Mauri]

Caio a tutti, ho personalizzato un menu basato su jQuery che però non prevede delle sottovoci che io invece vorrei inserire, qualcuno mi saprebbe dire come posso fare ?
Il codice html è :
<div id="navigation-block">
<ul id="sliding-navigation" class="menu">
<li class="sliding-element"><h3>Menu</h3>
<li class="sliding-element">home
<li class="sliding-element">contatti
[/list]
</div>
mentre quello javascript è :
$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 85, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 85);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 85);
});
});
}

Ringrazio anticipatamente chiunque decida di aiutarmi.

[artorius]

Scusa, ma non credo di capire: se vuoi che le sottovoci siano animate come le altre con solo l'effetto di indent al passaggio del mouse, la cosa già funziona (prova a mettere un UL con con degli elementi con class="sliding-element" e vedrai che vengono animati pure loro. Se invece vuoi una cosa tipo: passi sulla voce, quella viene animata e le voci inferiori vengono mostrate solo in quel momento, bisogna lavorarci un po' su...

[Prof_Mauri]

Si infatti, bravissimo, è proprio questo secondo obiettivo che vorrei raggiungere, non è che mi sapresti aiutare? io non ho ancora imparato bene questo linguaggio e non ci riesco .

[artorius]

ti saprei aiutare col codice in un altra libreria...jQuery proprio non la uso.

Penso che la soluzione più semplice sia di aggiungere UL all'interno dell'LI. Mettere l'LI con height fissa (tipo 20px) e overflow: hidden, così gli ul interni non si vedono. Poi aggiungi un effetto all'hover, aumentando l'altezza del li fino a visualizzare l'ul contenuto.

Ora faccio una prova e ti dico.

[artorius]

allora inserisci un UL con i link del sottomenu nell'li che si amplia poi usa questa funzione:

function slide(navigation_id, pad_out, pad_in, time, multiplier){
    // creates the target paths
    var list_elements = navigation_id + " li.sliding-element";
    var link_elements = list_elements + " a";
                
    // initiates the timer used for the sliding animation
    var timer = 0;
                
    // creates the hover-slide effect for all link elements
    $(list_elements).each(function(i){
        $(this).hover(function(){
            $(this).animate({
                paddingLeft: pad_out
            }, 85);
            $(this).animate({
                height: '60px'
            }, 85);
            $(this).animate({
                width: '140px'
            }, 85);
        }, function(){
            $(this).animate({
                paddingLeft: pad_in
            }, 85);
            $(this).animate({
                height: '20px'
            }, 85);
            $(this).animate({
                width: '150px'
            }, 85);
        });
    });
} 

ed applica questo stile alla pagina:

.sliding-element{
    height: 20px;
    overflow: hidden;
    width: 150px;
    border: 1px solid silver;
    padding-left: 15px;
} 

Per fortuna le librerie javascript sono tutte un po' simili

[Prof_Mauri]

Grazie però non funziona, forse il codice da te suggerito non va daccordo con la libreria jQuery

Non mi resta che chiederti se voui che ti invii i file per provarli personalmete, dal momento che il file jQuery è lunghissimo ed è un crimine inserirlo quì.
Io, dal mio canto, purtroppo non riesco ad intervenire in quanto mi mancano le conoscenze in tale ambito

Dopo di chè possiamo pubblicare la soluzione in modo da renderla utilizzabile da chiunque ne avesse bisogno.

Intanto ringrazio te per il tempo gentilmente dedicatomi e chiunque altro decida di fare altrettanto.

[artorius]

Forse è una questione di HTML:

Ti posto tutto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script src="jquery-1.2.6.js" type="text/javascript"></script>
        <script type="text/javascript">
            function slide(navigation_id, pad_out, pad_in, time, multiplier){ 
                // creates the target paths 
                var list_elements = navigation_id + " li.sliding-element"; 
                var link_elements = list_elements + " a"; 
                             
                // initiates the timer used for the sliding animation 
                var timer = 0; 
                             
                // creates the hover-slide effect for all link elements 
                $(list_elements).each(function(i){ 
                    $(this).hover(function(){ 
                        $(this).animate({ 
                            paddingLeft: pad_out 
                        }, 85); 
                        $(this).animate({ 
                            height: '60px' 
                        }, 85); 
                        $(this).animate({ 
                            width: '140px' 
                        }, 85); 
                    }, function(){ 
                        $(this).animate({ 
                            paddingLeft: pad_in 
                        }, 85); 
                        $(this).animate({ 
                            height: '20px' 
                        }, 85); 
                        $(this).animate({ 
                            width: '150px' 
                        }, 85); 
                    }); 
                }); 
            }
            $(document).ready(function()
            {
            slide("#sliding-navigation", 25, 15, 85, .8);
            });
        </script>
        <style type="text/css">
            .sliding-element{ 
                height: 20px; 
                overflow: hidden; 
                width: 150px; 
                border: 1px solid silver; 
                padding-left: 15px; 
            }
        </style>
    </head>
    <body>
        <div id="navigation-block"> 
        <ul id="sliding-navigation" class="menu">
        [*]<h3>Menu</h3>
        <li class="sliding-element">[url="index.htm"]home[/url]
            <ul>
                [*][url="contatti.htm"]contatti[/url]
                
                [*][url="contatti.htm"]contatti[/url]
                
                [*][url="contatti.htm"]contatti[/url]
                
            [/list]
        
        <li class="sliding-element">[url="contatti.htm"]contatti[/url]
        
        [/list]
        </div>
    </body>
</html>