• User Newbie

    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.


  • User Attivo

    Ne avrei uno simpatico che si articola in 2 file:

    1. apertura.js
    2. 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).
    //
    // 
    //---------------------------------------------------------------------------------------------------
    
    // 
    
     Global Variables 
    
    
    
    var firstLoad=0;
    var GlobalECState=0; // 0=collapsed, 1=expanded; used for inital state of ALL branches
    
    // 
    
     Global Functions 
    
    
    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;}
    }
    
    // 
    
     Event Handlers 
    
    
    
    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>

    <BODY style="background-color: #F2FBFF">
    <TABLE id="mainTable" border="1" cellpadding="0" cellspacing="0">
    <TR>
    <TD>
    <TABLE border="1" cellpadding="0" cellspacing="0">

            <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:

  • User Attivo

    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ò