Ho preso un codice in javascript e vorrei capirlo x correggerlo

**Saretta883** · 25-07-2011, 16:33

Come ho già spiegato nel titolo, io vorrei capire questo codice per poterlo modificare dato che non mi funziona:

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";
        }
    }
}

L'ho preso da QUI.
In pratica sto cercando di fare un menu espandibile senza però inserire manualmente nel codice le voci del menu ma prendendole dal db. Sono riuscita a fargli prendere le voci del menu e del sotto menu dal db ma il menu finale risulta esteso e non espandibile come invece vorrei io!!!
Dove sbaglio???
Grazie

Sara

**Saretta883** · 25-07-2011, 16:43

Il codice php ora è così:

Codice PHP:


<html>

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

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

**carlomarx** · 25-07-2011, 17:04

Se ti può interessare puoi ottenere un effetto quasi simile col solo css, senza javascript…

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina vuota</title>
<style>
div#menu {
	width: 170px;
	margin-left: 30px;
	background: #00005A;
	border: 1px solid #00005A;
	font: 11px Arial, Helvetica, sans-serif;
}

div#menu h3 {
	font-size: 100%;
	margin: 0;
	padding: 4px 10px;
	border-top: 1px solid #FFF;
	color: #000;
	background-color: #7BA5E7;
}


div#menu h3:hover {
	background-color: #FFFF00;
}
div#menu ul, div#menu ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div#menu ul li {
	margin: 0 0 1px 0;
}

div#menu 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#menu ul li ul li {
	display: none;
}

div#menu ul li:hover ul li {
	display: block;
}

div#menu a:hover {
	color: #00005A;
	background-color: #0099FF;
}

div#menu ul li ul li a {
	color: #333;
	background-color: #AECDFF;
	font-weight: normal;
}
</style>
</head>

<body>
<div id="menu">
<ul>[*]Home Page[*]<h3>Linguaggi</h3>
        <ul>[*]CSS[*]Javascript[*]DOM
[*]PHP[/list]
    [*]<h3>Software</h3>
        <ul>[*]Photoshop[*]Flash
[*]Fireworks[*]Dreamweaver[/list]
    [*]<h3>Webdesign</h3>
        <ul>[*]Webdesign
[*]Accessibilità[*]Usabilità[/list]
    [/list]
</div>
</body>
</html>

**carlomarx** · 25-07-2011, 17:12

Magari prova a passare anche da qui

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

Ho provato ad inserire il codice che mi hai postato ma con quello ottengo una cosa completamente diversa,
cioè quello che ti ho allegato in foto mentre io vorrei ottenere una cosa del genere:
menu
Capito??? Un menu non espanso che si possa espandere al click di una voce....
Io ottengo invece un meno già espanso nel quale posso solo cliccare le voci del sottomenu...
Non so se mi sono spiegata!!!
Cmq potresti spiegarmi il codice che ho postato nel primo messaggio???
Magari ci arrivo anche da sola a capire dove sbaglio!!!

**carlomarx** · 25-07-2011, 17:20

Non devi inserire il codice che ti ho postato nella tua pagina, devi creare una nuova pagina HTML col codice che ti ho postato! Il mio codice crea un menu espandibile, non già espanso! L'unica differenza è che si espande al mouseover invece che al click.
Se poi ti piace e lo vuoi inserire nella tua pagina devi sostituire tutte le occorrenze della parola "menu" con "nav" prima di inserirlo! (basta un normale editor di testo)

Se invece non ti piace e vuoi che si espanda al click invece che al mouseover dovrai per forza usare javascript.

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

Ah....scusa, non avevo capito!!!!
Ma non c'è un modo per farlo al click (con javascript ovviamente)???
O meglio...non c'è un modo per capire dove sbaglio???

Ho inserito il codice che mi hai postato (solo la parte <style>) nel mio file e ho sostituito tutti i div#menu con i div#nav ma non funziona...rimane sempre espanso

**carlomarx** · 25-07-2011, 17:36

codice:

var prev = null;

function menuClick() {
	this.parentNode.className = this.parentNode.className === "show" ? "hide" : "show";
   	if (prev) { prev.className = "hide"; }
	prev = this.parentNode;
}

window.onload = function() {
	if (document.getElementsByTagName && document.getElementById) {
		document.getElementById("nav").className = "jsenable";
		var hs = document.getElementById("nav").getElementsByTagName("h3");
		for (var i = 0; i < hs.length; i++) { hs[i].onclick = menuClick; }
	}
};

**carlomarx** · 25-07-2011, 17:40

Originariamente inviato da Saretta883
Ho inserito il codice che mi hai postato (solo la parte <style>) nel mio file e ho sostituito tutti i div#menu con i div#nav ma non funziona...rimane sempre espanso

Hai tolto il css del precedente menu javascript?

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

Ohi...si, l'avevo tolto!!Però non mi funzionava lo stesso!!!
Cmq sono riuscita a far funzionare il javascript...non c'era nessun errore in quel codice avevo fatto degli errori nel php con tutti quegli <ul>[*] messi nei cicli!!
GRAZIE per aver perso tempo con me!!!

Sara

Discussione: Ho preso un codice in javascript e vorrei capirlo x correggerlo

Strumenti discussione

Ricerca discussione

Visualizza

Ho preso un codice in javascript e vorrei capirlo x correggerlo

Permessi di invio