Aiuto per menù Javascript

[Kiki 85]

Ciao a tutti!

Ho ripreso dopo una vita a smanettare nel mondo del html e... questa sera mi sono imbattuto in un ostacolo che per me sta diventando ostico...

Ho provato a implementare questo menù (http://www.html.it/articoli/un-menu-...inding-menu-1/) nel mio sito di prova, ho creato i menù, cambiato gli stili ecc ma ho un problema... Non riesco a far stare dove voglio il menù!

Mi spiego meglio, la struttura della mia pagina è a tabelle, in un TD ho inserito la chiamata alla funzione che genera il menù, ma questo non viene generato all'interno della casella della tabella a bensì a bordo schermo sulla sinistra, questo problema sicuramente è dovuto a questa riga nella script:

stiliBoxDefault = ["position=absolute","left=0px","top=300px"]

Queste posizioni sono però riferite alla pagina e non alla casella della mia tabella (ho provato anche a creare un div all'interno del td ma neanche così funziona) come faccio a dire al mio tanto ostico script che si deve posizionare all'interno del td (o del div) invece che prendere come riferimento il body?

p.s. la struttura è una tabella larga 960px e centrata sullo schermo quindi non posso dare una posizione assoluta da sinistra al menù.

Vi ringrazio anticipatamente per l'aiuto!

Ricky

[cavicchiandrea]

Ciao e benvenuto, direi che gli dovrai dare le coordinate left e top di dove vuoi che si posizioni

[Kiki 85]

Dando le coordinate il problema nasce quando il sito viene visualizzato su schermi con risoluzione diversa, mentre le tabelle e i div si piazzano a metà automaticamente il menù si piazzerà giusto solamente se verrà visualizzato ad una data risoluzione...

Facendo alcune prove sono arrivato a questo:

screencenter = -360 + window.innerWidth /2;
stiliBoxDefault = ["position=absolute","left="+screencenter+"px", "top=115px"]

In questo modo riesco a posizionarlo dove voglio, con qualsiasi risoluzione compare allo stesso posto, il problema nasce se ridimensiono la finestra con la pagina aperta, tutto si sposta tranne il menù che (logicamente) rimane fisso dove era.

Ho provato anche dando "left=50%" ma in questo caso non funziona come vorrei, in quanto lui dal 50% dello schermo comincia a costruire il menù, in parole povere al punto del 50% c'è il primo pixel di sinistra del menù.

[Vindav]

inserisci il menu in un contenitore con posizione relativa

[Kiki 85]

Per contenitore intendi un div? Ho già provato ma non funziona

[Vindav]

con position:relative?

[Kiki 85]

Ho provato a togliere position:absolute e metterla relativa ma nulla cambia,
cioè:

stiliBoxDefault = ["position=relative","left=0px", "top=115px"]

Ho anche provato a inserire la script dentro un DIV nel codice HTML:

<td id="MENU" colspan="2"><div align="center"><script type="text/javascript">MenuQuercia();</script></div></td>

Ma nulla cambia, il menù me lo piazza a sinistra

[Vindav]

1) dove piazzi la chiamata allo script è indifferente, se lo metti all'interno del div non significa che il menu viene creato la dentro, è solo una chiamata ad una funzione js, per capire dove viene creato devi vedere cosa fa questa funzione.
2) io ti avevo suggerito di modificare la posizione (in relative) del contenitore (nel tuo caso il div) non del menu.
3) non è questa parte stiliBoxDefault = ["position=absolute","left=0px","top=115px"]; che crea problemi, anche se un div è posizionato in modo assoluto, non significa che sia posizionato in modo assoluto rispetto al body può esserlo rispetto all'elemento padre, se appunto il menu viene appeso al padre e non al body.
4)Dando un occhiata allo script ho visto che il menu viene sempre appeso al body, per modificare questo devi modificare lo script, più precisamente devi modificare la funzione ContainerMenu andando a specificare dove vuoi appendere il menu, fatto questo ti basta dare al contenitore una posizione relativa e il gioco è fatto.

Se vuoi usare questo menu la modifica va fatta alla linea 169 del js dove viene richiamata la funzione Level, devi passare come secondo parametro il tuo div invece di null.

[Kiki 85]

Grazie mille ora ci sono riuscito!

Mi ero fossilizzato come un pirla su quel stiliBoxDefault e avevo ignorato il resto, anche perché ero convinto che il menù sarebbe stato costruito tenendo come punto di partenza il posto dal quale veniva fatta la chiamata della funzione.

Ecco cosa ho fatto:

CSS

#MENU    {
    vertical-align: top; 
    background: #3B2006; 
    color: #FFFFFF;
    width: 100%;
    height:60px;
    padding: 5px 5px 5px 5px;
    }
    
#MENU_DIV
    {
    position: relative;
    left: 0px;
    vertical-align: top; 
    background: #3B2006; 
    color: #FFFFFF;
    width: 100%;
    height:60px;
    padding: 0px 0px 0px 0px;
    }

HTML

<tr>                  <td id="MENU" colspan="2"><div id="MENU_DIV"><script type="text/javascript">MenuQuercia();</script></div></td>
                </tr>

JS

    this.box = new  Level(this.boxS,MENU_DIV,this,this)    this.sup = new  Level(null,this.box,this.box,this) 
    this.supItems = []
    this.central = new  Level(this.cenS,this.box,this.box,this)

In un primo momento, prima di leggere la tua risposta mi ero arrangiato facendo una "taroccata" tremenda, ho creato una script che rileva l'eventuale resize della finestra e mandava in refresh la pagina, in questo modo il menù veniva ricostruito nel posto giusto... lo so che non era la soluzione migliore...

window.onresize = function(){
    var delay = 100; /* milliseconds - vary as desired */
    var executionTimer;
    return function() {
        if (executionTimer) {
            clearTimeout(executionTimer);
        }    
        executionTimer = setTimeout(function() {
            window.location.reload();
        }, delay);
    };
}();

Grazie mille del aiuto!