Menu javascript

mantergh

Menu javascript

Salve, volevo chiedere un aiutino su un menùa comparsa javascript
In particolare, io avevo visto questo menù

javascript.html .it/articoli/leggi/1737/menu-a-comparsa/

Che anche per me che non so programmare in java risultava semplice e chiaro, solo che questo menù si apre a destra o a sinistra, a me servirebbe che si aprisse verso il basso, qualcuno sa consigliarmi per caso una soluzione?

Ringrazio in anticipo per la risposta.

max.400

Ne avrei uno simpatico che si articola in 2 file:

apertura.js
accordion2.htm

File apertura.js


//--------------------------------------------------------------------------------------------------
// All material contained within this and associated downloaded pages is the property of 4thorder(TM) 
// Copyright ? 2005.  All rights reserved.
//
// Author: Michael Falatine || Authors email: [email protected]
//
// USAGE: You may use this script for commercial or personal use, however, the copyright is retained-
// by 4thorder (TM).
//
// 
//---------------------------------------------------------------------------------------------------

// 
 spoiler

 Global Variables 
 spoiler



var firstLoad=0;
var GlobalECState=0; // 0=collapsed, 1=expanded; used for inital state of ALL branches

// 
 spoiler

 Global Functions 
 spoiler


window.onload=InitializePage;
function InitializePage()
{
Headers();
attachEventhandlers();
}

// Attach event handlers to all images within container
function attachEventhandlers()
{
mainTABLEElement=document.getElementById("mainTable");
TABLECollection=mainTABLEElement.getElementsByTagName("TABLE");

if (TABLECollection!=null)
    {for (l=0; l<TABLECollection.length; l++)
        {
        THCol=TABLECollection.item(l).getElementsByTagName("TH");
        THCol.item(0).onclick=onclickHandler;
        }
    }
}

function Headers()
{
    mainTABLEElement=document.getElementById("mainTable");
    TABLECollection=mainTABLEElement.getElementsByTagName("TABLE");
    
    if (TABLECollection!=null)
        {
        for (z=0; z<TABLECollection.length; z++)
            {
            TRCol=TABLECollection.item(z).getElementsByTagName("TR");
            THCol=TABLECollection.item(z).getElementsByTagName("TH");
    
            if(firstLoad==0)
                {     // Yes: FIRST LOAD OF PAGE - set inital ECState
                if(GlobalECState==0)
                    {// Global ECState is COLLAPSED (+) (0)                
                    THCol.item(0).setAttribute("ECState",0);
                    for (j=1; j<TRCol.length; j++)
                        {
                        TRCol.item(j).style.display='none';
                        }
                    }
                else
                    {// Global ECState is EXPANDED (-) (1)
                    THCol.item(0).setAttribute("ECState",1);    
                    for (k=1; k<TRCol.length; k++)
                        {
                        TRCol.item(k).style.display='block';
                        }
                    }
                }
            else      // No: FIRST LOAD OF PAGE - change ECState
                {    // Grab ECState and expand or collapse branch
                State=THCol.item(0).getAttribute("ECState");
                if(State==0)
                    {
                    // ECState is COLLAPSED (+) (0)
                    for (l=1; l<TRCol.length;l++)
                        {
                        TRCol.item(l).style.display='none';
                        }
                    }
                else
                    {
                        // ECState is EXPANDED (-) (1)
                        for (m=0; m<TRCol.length; m++)
                        {
                        TRCol.item(m).style.display='block';
                        }
                    }
                }
            }
        }
    if(firstLoad==0){firstLoad=1;}
}

// 
 spoiler

 Event Handlers 
 spoiler



function onclickHandler(e)
{
// Browser compatibility code
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;

    // Toggle ECState
    State=targ.getAttribute("ECState");
    if(State==0)
        {targ.setAttribute("ECState",1);}
    else{targ.setAttribute("ECState",0);}
Headers();
}


```*File accordion2.htm*

<HTML>
<HEAD>
<STYLE>
<!--
th { text-align:center; cursor:pointer; border: 1px solid #000000; background-color: #B9E9FF; color:#005984; font-family:Tahoma; font-size:10pt }
tr { text-align:center; cursor:pointer; border: 0px solid; background-color: #005984; font-family:Tahoma; font-size:10pt; color:#8CDAFF }

a:link { font-family: Tahoma; font-size: 10pt; color: #8CDAFF ; text-decoration: none }
a:hover { font-size: 10pt; font-family: Tahoma; color:white; text-decoration: none }
a { font-family: Tahoma; font-size: 10pt; color: ; text-decoration: none }

table.mainTable {border-style: groove; border-width: 4px; border-collapse:collapse}
-->
</STYLE>
<script type="text/javascript" language="JavaScript" src="apertura.js"></script>

</HEAD>

        <TR>
            <TH width="150">Menu Header 1</TH>
        </TR>
        <TR>
            <TD width="150"><A href="807.html">Sub selection a</A></TD>
        </TR>
        <TR>
            <TD width="150"><A href="807.html">Sub selection b</A></TD>

        </TR>
    </TABLE>
    </TD>
</TR>
<TR>
    <TD>
    <TABLE border="1" cellpadding="0" cellspacing="0">
        <TR>
            <TH width="150">Menu Header 2</TH>

        </TR>
        <TR>
            <TD width="150"><A href="807.html">Sub selection a</A></TD>
        </TR>
        <TR>
            <TD width="150"><A href="807.html">Sub selection b</A></TD>
        </TR>
        <TR>

            <TD width="150"><A href="807.html">Sub selection c</A></TD>
        </TR>
        <TR>
            <TD width="150"><A href="807.html">Sub selection d</A></TD>
        </TR>
    </TABLE>
    </TD>
</TR>

<TR>
    <TD>
    <TABLE border="1" cellpadding="0" cellspacing="0">
        <TR>
            <TH width="150">Menu Header 3</TH>
        </TR>
        <TR>
            <TD width="150"><A href="807.html">Sub selection a</A></TD>

        </TR>
        <TR>
            <TD width="150"><A href="807.html">Sub selection b</A></TD>
        </TR>
        <TR>
            <TD width="150"><A href="807.html">Sub selection c</A></TD>
        </TR>
        <TR>

            <TD width="150"><A href="807.html">Sub selection d</A></TD>
        </TR>
    </TABLE>
    </TD>
</TR>
<TR>
    <TD>
    <TABLE border="1" cellpadding="0" cellspacing="0">

        <TR>
            <TH width="150">Menu Header 4</TH>
        </TR>
    </TABLE>
    </TD>
</TR>

</TABLE>
<A target="_blank" href="">
<FONT size="1">4thorder<SUP>(TM)</SUP> Full Scripts</FONT></A>

</BODY>
</HTML>


Ci vediamo...
by Doctor Max :fumato:

max.400

Il tuo menù si articola in 3 file:

un file css
un file js
un file html

Per modificare la direzione della tendina devi modificare una variabile chiamata


var slideDirection = 'right';    // Movimento a destra (right) o sinistra (left)

Se tu metti 'bottom' il menu uscirà verso il basso... c'è un pò da smanettarci
tra l'altro non so esattamente come lo vuoi in genere ci vorrebbe una toolbar
i pulsanti disposti in orizzontale ed in basso esce la tendina... bò