Menu espandibile

**Saretta883** · 25-07-2011, 12:32

Ciao a tutti....
devo fare un menu espandibile...e qst bene o male l'ho fatto utilizzando la seguente guida....http://javascript.html.it/articoli/leggi/483/un-menu-espandibile-con-javascript-e-css/.
Il mio problema ora è il seguente:
Al posto delle voci del menu che nella guida vengono inserite "manualmente" io devo prelevarle dal db.
Ho la seguente query:

select m.cod_macro livello1, m.des_macro des_livello1,
fu.cod_funzione livello2, fu.des_funzione des_livello2, fu.pagina pagina
from con_macro m, con_menu me, con_funzioni fu
where m.cod_macro = me.cod_macro and
me.cod_funzione = fu.cod_funzione
order by m.ordine,me.ordine

che restituisce 5 colonne: Nella 2° c'è la voce che deve comparire nel menu, nella 4° le voci che devono comparire nel sottomenu. Ovviamente le voci della seconda collonna sono ripetute n volte, dove n= numero di sottomenu corrispondenti.
Non so se mi sono spiegata.
Cmq io pensavo di procedere così:

Codice PHP:


<html>

    <head>

        <title>Menù</title>

    </head>

    <link rel="stylesheet" type="text/CSS" href="jsmenu.CSS">

    <link rel="stylesheet" type="text/CSS" href="css.CSS">

    <script type="text/Javascript" src="expand.js"></script> 

    <body>

    <div id="nav">

    <ul>

    [*][url="http://localhost/frame1.htm"]Home Page[/url]

    <?php

    $c=oci_connect("XXX", "XXX", "XXXXX"); 

    $queryprima=oci_parse($c,"select m.cod_macro livello1, m.des_macro des_livello1,

                    fu.cod_funzione livello2, fu.des_funzione des_livello2, fu.pagina pagina

    from con_macro m, con_menu me, con_funzioni fu

    where m.cod_macro = me.cod_macro and me.cod_funzione = fu.cod_funzione

    order by m.ordine,me.ordine");

    while (($riga=oci_fetch_array($queryprima, OCI_NUM + OCI_RETURN_NULLS))){



[NB....qui c'è il codice vecchio...come posso sostituire le voci ad esempio Linguaggi con la voce del db??Considerando che la voce del db è ripetuta più volte tante quante sono le sottovoci del menu correlate]



    echo('[*]<h3>Linguaggi</h3>');

    echo('<ul>');

    echo('[*][url="#"]CSS[/url]');

    echo('[*][url="#"]Javascript[/url]');

    echo('[*][url="#"]DOM[/url]');

    echo('[*][url="#"]PHP[/url]');

    echo('[/list]');

    echo('');

    echo('[*]<h3>Software</h3>');

    echo('<ul>');

    echo('[*][url="#"]Photoshop[/url]');

    echo('[*][url="#"]Flash[/url]');

    echo('[*][url="#"]Fireworks[/url]');

    echo('[*][url="#"]Dreamweaver[/url]');

    echo('[/list]');

    echo('');

    echo('[*]<h3>Webdesign</h3>');

    echo('<ul>');

    echo('[*][url="#"]Webdesign[/url]');

    echo('[*][url="#"]Accessibilità[/url]');

    echo('[*][url="#"]Usabilità[/url]');

    echo('[/list]');

    echo('');

    echo('[/list]');

    echo('</div>'); 

    ?>

    </body>

</html>

Spero che qualcuno riesca ad aiutarmi...
Grazie

Sara

**Saretta883** · 25-07-2011, 17:09

Sono riuscita a modificarlo e la parte php funziona...ora il problema è il javascript che non fa quello che dovrebbe cmq vi posto il codice, magari potrà essere utile a qualcuno!!!

menupage:

Codice PHP:


<html>

    <link rel="stylesheet" type="text/CSS" href="css.CSS">

    <script type="text/Javascript" src="expand.js"></script> 

    <body>

    <div id="nav">

    <ul>

    <?php

    $c=oci_connect("xxx", "xxx", "xxx"); 

    $queryprima=oci_parse($c,"select m.cod_macro livello1, m.des_macro des_livello1

    from con_macro m    order by m.ordine")

    oci_execute($queryprima);

    while (($riga=oci_fetch_array($queryprima, OCI_NUM + OCI_RETURN_NULLS))){

        echo("[*]<h3>".$riga[1]."</a></h3>");

        $macro=$riga[0];

        $queryseconda=oci_parse($c,"select m.cod_macro livello1, fu.des_funzione des_livello2    from con_macro m, con_menu me, con_funzioni fu where m.cod_macro = me.cod_macro and me.cod_funzione = fu.cod_funzione and m.cod_macro='$macro' order by m.ordine,me.ordine");

        oci_execute($queryseconda);

        while (($row=oci_fetch_array($queryseconda, OCI_NUM + OCI_RETURN_NULLS))){

        echo ('[*][url="#"]'.$row[1].'[/url]');

        }

    echo('');

    }

    ?>[/list]

            </div>

            </body>

            </html>

**Saretta883** · 25-07-2011, 17:49

L'errore non era nel codice javascript ma nel codice php quindi riporto di seguito il codice funzionante:

menupage.php

Codice PHP:


<html>

    <link rel="stylesheet" type="text/CSS" href="css.CSS">

    <script type="text/Javascript" src="expand.js"></script> 

    <body>

    <div id="nav">

    <ul>

    <?php

    $c=oci_connect("xxx", "xxx", "xxx"); 

    $queryprima=oci_parse($c,"select m.cod_macro livello1, m.des_macro des_livello1

    from con_macro m    order by m.ordine");

    oci_execute($queryprima);

    while (($riga=oci_fetch_array($queryprima, OCI_NUM + OCI_RETURN_NULLS))){

    echo("[*]<h3>".$riga[1]."</h3><ul>");

    $macro=$riga[0];

    $queryseconda=oci_parse($c,"select m.cod_macro livello1, fu.des_funzione des_livello2 from con_macro m, con_menu me, con_funzioni fu where m.cod_macro = me.cod_macro and me.cod_funzione = fu.cod_funzione and m.cod_macro='$macro' order by m.ordine,me.ordine");

    oci_execute($queryseconda);

    while (($row=oci_fetch_array($queryseconda, OCI_NUM + OCI_RETURN_NULLS))){

    echo ('[*][url="#"]'.$row[1].'[/url]');

    }

    echo('[/list]');

    }

    ?>

    [/list]

    </div>

    </body>

             </html>

Inserisco di seguito anche il codice del file javascript e del file css che viene richiamato in questo codice php così potrete avere una cosa completa.

css.css

codice:

div#nav{width:170px;margin-left: 30px;background: #00005A;
    border: 1px solid #00005A; font: 11px Arial, Helvetica, sans-serif}
div#nav h3{font-size: 100%;margin: 0;padding: 4px 10px;
    border-top: 1px solid #FFF;color: #000;background-color: #7BA5E7}
div#nav ul,div#nav li{margin: 0;padding: 0;list-style-type: none}
div#nav li{margin: 0 0 1px 0}
div#nav a{display: block;padding-left: 15px;height: 18px;line-height: 18px;
    border-top: 1px solid #FFF;background-color: #BDBDBD;color: #000;
    text-decoration: none;font-weight: bold}
div#nav a:hover{color: #00005A;background-color: #0099FF}
div#nav ul ul a{color: #333; background-color: #AECDFF;font-weight: normal} 

div.jsenable h3{cursor: pointer}
div.jsenable ul ul{display:none}
div#nav li.hide ul{display:none}
div#nav li.show ul{display:block}
div#nav li.show h3{background-color: #FF0}

expand.js

codice:

 var prev= null;

window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
    document.getElementById("nav").className="jsenable";
    BuildList();
    }
}

function BuildList(){
var hs=document.getElementById("nav").getElementsByTagName("h3");
for(var i=0;i<hs.length;i++){
    hs[i].onclick=function(){
        if(this.parentNode.className!="show"){
            this.parentNode.className="show";
            if(prev && prev!=this.parentNode) prev.className="hide";
            prev=this.parentNode;
            }
        else this.parentNode.className="hide";
        }
    }
}

Spero che questo potrà essere utile a qualcun altro.
Ciao ciao

Sara

Discussione: Menu espandibile

Strumenti discussione

Ricerca discussione

Visualizza

Menu espandibile

Permessi di invio