menu a struttura ad albero (ricorsivo)

**OcchioCrepato** · 26-06-2007, 14:34

Dalla tabella che hai postato prima ricavo il menu sopra.
magari può mancare qualche div ma lo si può inserire senza problemi.

certo che se come esempio posti un menu con il codice asp in mezzo non si riesce a capire come lo vuoi.
cerca, partendo dalla tabella che hai postato prima, di creare il menu con le relative voci (About Us, productds, ecc..) con i relativi figli e confrontalo con quello che ti ho postato io poi vediamo le differenze e vediamo di aggiustarlo.

**OcchioCrepato** · 26-06-2007, 14:38

Originariamente inviato da Mems
I menu si fanno con gli elenchi puntati (o numerati).

glielo avevo già detto ma vuole farlo così

@marco1970 da dove hai preso lo script per la visualizzazione del menu?

**marco1970** · 26-06-2007, 21:19

grazie infinite per l'interessamento.
il menu in questione è questo e purtroppo è fatto con i tag div.
Se esiste altro modo piu corretto per realizzare la stessa cosa vi sarei grato se mi indicaste come e dove.
Ps. Il menu deve essere variabile nelle voci principali sottomenu ecc... posso avere infiniti sottomenu.
Grazie ancora
marco

Dimenticavo il codice formattato del menu lo trovi al link sopra riferito alla voce "Products"

**OcchioCrepato** · 27-06-2007, 14:11

Ok con le modifiche che ho fatto mi funziona a metà.

prova a vedere questo esempio fatto con le liste

ciao

**OcchioCrepato** · 27-06-2007, 14:21

Ecco il menu che ti ho postato io.
fatto e funzionante.
copia il codice così com'è inserendo la tua connessione

codice:

<%@ Language=VBScript %>
<%
Response.Expires = -1500 
Response.ExpiresAbsolute = now()-1500
Response.Addheader "pragma","no-cache"
Response.Addheader "cache-control","private"
Response.Cachecontrol="no-cache"
%>

<%
'Apertura connessione Database
call OpenConnection()

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr" >

<head>
<title>Prova</title>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
		}
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>


</head>


<%


function menuAlbero(idPadre,byref strMenu,indice)
		
	
	dim RsFigli,Rs1
	set Rs1=Server.CreateObject ("ADODB.recordset")
	set RsFigli=Server.CreateObject ("ADODB.recordset")
		
	spazio=""
	'esecuzione della query
	sSQL="select * from menu "
	sSQL=sSQL & " where id_Padre=" & idPadre
	sSQL=sSQL & " order by nome_menu"		
	'Response.Write sSQL
	Rs1.Open sSQL,objConn,3,3
	

	if not Rs1.EOF then
		'ciclo sui risultati trovati
			strMenu=strMenu & vbcrlf
		do while not Rs1.EOF 
			idMenu=Rs1.Fields ("id")
			descrizione=Rs1.Fields ("nome_menu")
			link=Rs1.Fields ("http")
			
			'Controllo se il menu ha dei figli
			sSQL="select count(*) as NumFigli from menu where id_Padre=" & idMenu 
			RsFigli.Open sSQL,objConn,3,3
			NumFigli=RsFigli.Fields ("NumFigli")
			RsFigli.Close
			
			spazio=""
			for i=0 to indice
				'spazio=spazio & ""
			next
			
			
			'Gestione del link
			link=trim(link)
			descrizione=trim(descrizione)
			strMenu=strMenu & spazio & "[*]" & descrizione & "" & vbcrlf

			if NumFigli>0 then
				strMenu=strMenu & "<ul>" & vbcrlf
				indice=indice+1
				'Se esistono dei figli richiamo la funzione sul menu figlio
				call menuAlbero(idMenu,strMenu,indice)			
				strMenu=strMenu & "[/list]" & vbcrlf
			end if
			strMenu=strMenu & "" & vbcrlf
			
			Rs1.MoveNext 
		loop


	end if

	Rs1.Close
	set Rs1=nothing
	set RsFigli=nothing

end function

strMenu=""
call menuAlbero(999,strMenu,0)
strMenu="<div class=""suckertreemenu""><ul id=""treemenu1"">" & strMenu & "[/list]</div>"
Response.Write strMenu


%>

</body>
</html>
<%call CloseConnection()%>

Questo è il file della connessione

codice:

<%
dim objConn
dim strConn
set objConn=Server.CreateObject ("ADODB.Connection")
objConn.CursorLocation =3
function OpenConnection()
	on error resume next	
	DataSource=Server.MapPath ("/database.mdb")
	strConn="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & DataSource & ";Persist Security Info=False;"
	objConn.Open strConn
	if err.number <>0 then
		Response.Write DataSource & "
"
		Response.Write strConn & "
"
		Response.Write "ERRORE:
" & err.number & "
" & err.Description 
		Response.End 
	end if
end function

function CloseConnection()
	objConn.Close ()
	set objConn=nothing
end function


%>

ciao

**marco1970** · 29-06-2007, 12:52

allora... inizio con ringraziare tutti per l'aiuto ed i preziosi consigli.
Ho modificato leggermente lo script ma non riesco ad avere determinati effetti che avevo con quello mio.
In pratica vorrei:
- che quando vado con il mouse su un menu che contiene sotto menu questo risultasse ancora con la classica freccetta a dx
- che il percorso di menu sottomenu e voci risultasse evidente. in pratica dovrebbero rimanere evidenziati in maniera diversa dal resto delle voci.
Allego codice (è codice di prova ed ho incluso tutto in un solo file)

Codice PHP:


<%@ Language=VBScript %>

<%

Response.Expires = -1500

Response.ExpiresAbsolute = now()-1500

Response.Addheader "pragma","no-cache"

Response.Addheader "cache-control","private"

Response.Cachecontrol="no-cache"



'Apertura connessione Database

dim objConn

dim strConn

set objConn=Server.CreateObject ("ADODB.Connection")

objConn.CursorLocation =3

    on error resume next

    DataSource=Server.MapPath ("mdb-database/miodatabase.mdb")

    strConn="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & DataSource & ";Persist Security Info=False;"

    objConn.Open strConn

    if err.number <>0 then

        Response.Write DataSource & "
"

        Response.Write strConn & "
"

        Response.Write "ERRORE:
" & err.number & "
" & err.Description

        Response.End

    end if



function CloseConnection()

    objConn.Close ()

    set objConn=nothing

end function



%>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr" >



<head>

<title>Prova</title>



<style type="text/css">



/*Credits: Dynamic Drive CSS Library */

/*URL: [url]http://www.dynamicdrive.com/style/[/url] */



.suckerdiv ul{

margin: 0;

padding: 0;

list-style-type: none;

width: 160px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

}



.suckerdiv ul li{

position: relative;

background: white url(chiaro.gif) repeat-x bottom left;

}



/*Sub level menu items */

.suckerdiv ul li ul{

position: absolute;

width: 100px; /*sub menu width*/

top: 0;

visibility: hidden;

}



/* Sub level menu links style */

.suckerdiv ul li a{



padding: 2px 5px;

border: 1px solid #ccc;

border-bottom: 0;





background: white url(chiaro.gif) repeat-x bottom left;

font: 10px "Trebuchet MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

overflow: auto;/*force hasLayout in IE7 */

color: white;

display: block;

width: auto;

/*padding: 3px 0;*/

padding-left: 10px;

text-decoration: none;

}



.suckerdiv ul li a:visited{

color: black;

}



.suckerdiv ul li a:hover{

background-image: url(scuro.gif) ;

}



.suckerdiv .subfolderstyle{

background: url(arrow.gif) no-repeat center right;

}





/* Holly Hack for IE \*/

* html .suckerdiv ul li { float: left; height: 1%; }

* html .suckerdiv ul li a { height: 1%; }

/* End */



</style>



<script type="text/javascript">



//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)

//By Dynamic Drive: [url]http://www.dynamicdrive.com/style/[/url]



var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas



function buildsubmenus(){

for (var i=0; i<menuids.length; i++){

  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

    for (var t=0; t<ultags.length; t++){

    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"

        if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu

            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item

        else //else if this is a sub level submenu (ul)

          ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

    ultags[t].parentNode.onmouseover=function(){

    this.getElementsByTagName("ul")[0].style.display="block"

    }

    ultags[t].parentNode.onmouseout=function(){

    this.getElementsByTagName("ul")[0].style.display="none"

    }

    }

        for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

        ultags[t].style.visibility="visible"

        ultags[t].style.display="none"

        }

  }

}



if (window.addEventListener)

window.addEventListener("load", buildsubmenus, false)

else if (window.attachEvent)

window.attachEvent("onload", buildsubmenus)



</script>







</head>





<%





function menuAlbero(idPadre,byref strMenu,indice)





    dim RsFigli,Rs1

    set Rs1=Server.CreateObject ("ADODB.recordset")

    set RsFigli=Server.CreateObject ("ADODB.recordset")



    spazio=""

    'esecuzione della query

    sSQL="select * from menu "

    sSQL=sSQL & " where id_Padre=" & idPadre

    sSQL=sSQL & " order by nome_menu"

    'Response.Write sSQL

    Rs1.Open sSQL,objConn,3,3





    if not Rs1.EOF then

        'ciclo sui risultati trovati

            strMenu=strMenu & vbcrlf

        do while not Rs1.EOF

            idMenu=Rs1.Fields ("id")

            descrizione=Rs1.Fields ("nome_menu")

            link=Rs1.Fields ("http")



            'Controllo se il menu ha dei figli

            sSQL="select count(*) as NumFigli from menu where id_Padre=" & idMenu

            RsFigli.Open sSQL,objConn,3,3

            NumFigli=RsFigli.Fields ("NumFigli")

            RsFigli.Close



            spazio=""

            for i=0 to indice

                'spazio=spazio & " "

            next





            'Gestione del link

            link=trim(link)

            descrizione=trim(descrizione)

            strMenu=strMenu & spazio & "[*][url=""]" & descrizione & "[/url]" & vbcrlf



            if NumFigli>0 then

                strMenu=strMenu & "<ul>" & vbcrlf

                indice=indice+1

                'Se esistono dei figli richiamo la funzione sul menu figlio

                call menuAlbero(idMenu,strMenu,indice)

                strMenu=strMenu & "[/list]" & vbcrlf

            end if

            strMenu=strMenu & "" & vbcrlf



            Rs1.MoveNext

        loop





    end if



    Rs1.Close

    set Rs1=nothing

    set RsFigli=nothing



end function



strMenu=""

call menuAlbero(999,strMenu,0)

strMenu="<div class=""suckerdiv""><ul id=""suckertree1"">" & strMenu & "[/list]</div>"

Response.Write strMenu





%>



</body>

</html>

**OcchioCrepato** · 29-06-2007, 13:21

Originariamente inviato da marco1970
allora... inizio con ringraziare tutti per l'aiuto ed i preziosi consigli.
Ho modificato leggermente lo script ma non riesco ad avere determinati effetti che avevo con quello mio.
In pratica vorrei:
- che quando vado con il mouse su un menu che contiene sotto menu questo risultasse ancora con la classica freccetta a dx
- che il percorso di menu sottomenu e voci risultasse evidente. in pratica dovrebbero rimanere evidenziati in maniera diversa dal resto delle voci.

Non riesco a capire!!
Ma non è già quello che fa il menu che ti ho proposto di utilizzare che trovi all'indirizzo http://www.dynamicdrive.com/style/cs...menu-vertical/

evidentemente hai modificato qualcosa di troppo.
ti consiglio di ripristinare il codice css e javascript originale e ogni volta che fai una modifica testare se ottieni l'effetto desiderato.

Al massimo prova spiegare quali colori vuoi utilizzare

Ma adesso lavori con il menu verticale? non era orizzontale prima?:master:

**marco1970** · 29-06-2007, 15:05

ho sempre utilizzato il menu verticale.
partendo dall'esempio di http://www.dynamicdrive.com/style/cs...menu-vertical/ vorrei che tutti i percorsi selezionati risultassero gialli partendo dal menu andando a finire all'ultima voce.
inoltre vorrei cambiare il fondo bianco con il file allegato ed il colore giallo con uno sfindo gif tipo quello allegato

**OcchioCrepato** · 29-06-2007, 15:25

Si ho capito cosa vuoi fare.

ho fatto delle prove ma mi sono bloccato

Ti conviene chiedere nel forum css

Se riesci fai una pagina, anche statica, da mettere on line in modo che sia più facile capire il problema.

ciao

Discussione: menu a struttura ad albero (ricorsivo)

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio