Menù ad Albero da modificare

05-01-2007, 19.49.46

Salve,
sto progettando un semplice menù ad albero, ho provato ad apportare varie modifica ad uno script che ho trovato su Internet, il risultato è questo:
PAGINA
Cioè quello a sinistra, vorrei fare che quando uno arriva nella pagina vede i links chiusi, cioè i due links non si devono vedere, si devono vedere solo i rettangoli.

Questi sono i codici da modificare:
tra <head> e </head>

Codice HTML:

<style type="text/css">
<!-- 
body { 
	font: .80em verdana, helvetica, sans-serif;	
}
ul { 
	list-style: disc url(doc.gif);
	margin:0;padding:0 2em;
}
li.menu { list-style: square url(../menu/cartellachiusa.gif); }
-->
</style>


<script type="text/javascript">
<!--
function mmenu(mID) {
	var menu = document.getElementById(mID);
	var display = menu.style.display;
	menu.style.display = (display == "block") ? "none" : "block";
	menu.parentNode.style.listStyleImage = (display == "block") ? "url(../menu/cartellachiusa.gif)" : 

"url(../menu/cartellaaperta.gif)";
}

window.onload = function() {
	var uls = document.getElementsByTagName("ul");
	for (i=0;i<uls.length;i++) {
		if(uls[i].className=="submenu")uls[i].style.display = "none";
	}
}
//-->
</script>

nella parte sinistra

Codice HTML:

<a href="javascript:mmenu('submenu-1')"><img src="../menu/button.JPG"></a>
	<ul class="submenu" id="submenu-1">
		<a href="#">Link</a><br>
		<a href="#">Link</a>
</ul>
<a href="javascript:mmenu('submenu-2')"><img src="../menu/button.JPG"></a>
	<ul class="submenu" id="submenu-2">
		<a href="#">Link</a><br>
		<a href="#">Link</a>
</ul>
<a href="javascript:mmenu('submenu-3')"><img src="../menu/button.JPG"></a>
	<ul class="submenu" id="submenu-3">
		<a href="#">Link</a><br>
		<a href="#">Link</a>
</ul>
<a href="javascript:mmenu('submenu-4')"><img src="../menu/button.JPG"></a>
	<ul class="submenu" id="submenu-4">
		<a href="#">Link</a><br>
		<a href="#">Link</a>
</ul>

**silverseraph** · 05-01-2007, 21.39.58

Non so se funziona, comunque prova ad aggiungere all' <ul> style="display: none"

05-01-2007, 22.15.47

Originalmente inviato da silverseraph

Non so se funziona, comunque prova ad aggiungere all' <ul> style="display: none"

Precisamente dove?

P.S.Il codice andrebbe anche "ripulito" un pò, siccome ho provato varie volte senza riuscirci, per esempio eliminando quelle immagini (doc.gif ,cartellachiusa.gif,ecc...).

05-01-2007, 23.17.21

Originalmente inviato da PSW

Precisamente dove?

P.S.Il codice andrebbe anche "ripulito" un pò, siccome ho provato varie volte senza riuscirci, per esempio eliminando quelle immagini (doc.gif ,cartellachiusa.gif,ecc...).

. . Prova questo codice che ho modificato e ripulito , dovrebbe funzionare ( Qui: un Esempio ).

Codice:

 <html> <head> <style type="text/css"> <!-- 

body { font: .80em verdana, helvetica, sans-serif; } 

ul { list-style: disc; margin:0; padding:0 2em; } 

li.menu { list-style: square; } 

a:link { color: #909; } a:visited { color: #909; } 

a:hover { color: #09e; } a:active { color: #df0; } 

// --> </style> 

<script type="text/javascript"> <!-- 

function mmenu(mID) { 

var menu = document.getElementById(mID); 

var display = menu.style.display; 

menu.style.display = (display == "block") ? "none" : "block"; } 

window.onload = function() { 

var uls = document.getElementsByTagName("ul"); 

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

if(uls[i].className=="submenu")uls[i].style.display = "none"; } } 

// --> </script> </head> <body bgcolor=silver scroll=auto> 

<a href="javascript:mmenu('submenu-1')">
<img src="images/button.JPG"></a>  

<ul class="submenu" id="submenu-1">  
<a href="#">Link</a><br>  <a href="#">Link</a> </ul> <br> 

<a href="javascript:mmenu('submenu-2')">
<img src="images/button.JPG"></a>   

<ul class="submenu" id="submenu-2">  
<a href="#">Link</a><br>  <a href="#">Link</a> </ul> <br> 

<a href="javascript:mmenu('submenu-3')">
<img src="images/button.JPG"></a>	

<ul class="submenu" id="submenu-3">  
<a href="#">Link</a><br>  <a href="#">Link</a> </ul> <br> 

<a href="javascript:mmenu('submenu-4')">
<img src="images/button.JPG"></a>	

<ul class="submenu" id="submenu-4">  
<a href="#">Link</a><br>  <a href="#">Link</a> </ul> <br> 

 </body> </html>

06-01-2007, 01.01.08

Niente. Ho copiato tutto ed ho incollato sia nella pagina index2.php (la parte tra head e /head) che nella sinistra2.php (tra body e /body) nel modo giusto, ma come potete vedere da qui, all'inizio sono già aperti.

06-01-2007, 02.42.27

Originalmente inviato da PSW

Niente. Ho copiato tutto ed ho incollato sia nella pagina index2.php (la parte tra head e /head) che nella sinistra2.php (tra body e /body) nel modo giusto, ma come potete vedere da qui, all'inizio sono già aperti.

Non funziona perché va in conflitto con un altro script presente nella tua Pagina . Per risolvere il Problema , è sufficiente modificare il tag Body:

da <BODY onLoad="cacheOff();"> a <BODY onLoad="cacheOff(); function();"> .

Comunque questo javaScript che hai trovato in Rete non è perfetto , quando la Pagina viene caricata vengono mostrati per una frazione di secondo i Links aperti e poi si chiudono automaticamente . Dovrebbero non aprirsi affatto , prima del Click del visitatore . . Forse bisognerebbe cercare un altro script ( uno migliore ) .

06-01-2007, 14.14.00

Adesso lo script funziona, però la barra di caricamento è sballata (appare in alto), e, come hai detto tu, appaiono per qualche secondo aperti.
Prima che inizi a lavorarci su, potreste consigliarmi qualche altro script che faccia la stessa cosa, senza creare problemi?

**silverseraph** · 06-01-2007, 16.11.16

Prova a fare così:

Codice HTML:

<script type="text/javascript">
var frame_open = true;

function open (id)
{
	if (frame_open)
	{
		document.getElementById ("frame" + id).style.display = "block";
	}
	else
	{
		document.getElementById ("frame" + id).style.display = "none";
	}
	frame_open = !frame_open;
}
</script>
<table cellpadding="2" cellspacing="0" border="0">
	<tr>
		<td><a href="javascript:open(1)"><img src="images/button.JPG" alt="" /></a></td>
	</tr>
	<tr>
		<td>
			<div id="frame1" style="display: none; position: relative;">
				<ul class="submenu">  
					<a href="#">Link</a><br />  
					<a href="#">Link</a> 
				</ul>
			</div>
		</td>
	</tr>
	<tr>
		<td><a href="javascript:open(2)"><img src="images/button.JPG" alt="" /></a></td>
	</tr>
	<tr>
		<td>
			<div id="frame2" style="display: none; position: relative;">
				<ul class="submenu">  
					<a href="#">Link</a><br />  
					<a href="#">Link</a> 
				</ul>
			</div>
		</td>
	</tr>
	<tr>
		<td><a href="javascript:open(3)"><img src="images/button.JPG" alt="" /></a></td>
	</tr>
	<tr>
		<td>
			<div id="frame3" style="display: none; position: relative;">
				<ul class="submenu">  
					<a href="#">Link</a><br />  
					<a href="#">Link</a> 
				</ul>
			</div>
		</td>
	</tr>
</table>

10-01-2007, 00.51.03

Fatto
-Si può ridurre lo spazio tra l'immagine ed il Link?
-Questo tipo di menù è visibile (e compatibile) con tutti i tipi di browser?

**silverseraph** · 10-01-2007, 16.26.13

SI, è compatibile... puoi ridurre le distanze con i CSS magari modificando i margini o il padding.

ciao

10-01-2007, 20.03.12

Si, adesso va bene.
Però volevo cheiderti una cosa, nella parte

Codice HTML:

<div id="frame1" style="display: none; position: relative;">
				<ul class="submenu">  
					<a href="#">Link</a><br />  
					<a href="#">Link</a> 
				</ul>...

Questo:
<br />
Cosa fà?
E' solo uno sbaglio o serve a qualcosa di preciso?
Perchè io so che si scrive <br>, per mandare a capo.

**funcool** · 10-01-2007, 20.08.07

Negli elenchi ogni riga si mette dentro al tag li.

Codice HTML:

<div id="frame1" style="display: none; position: relative;">
				<ul class="submenu">  
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>...

11-01-2007, 01.07.21

Metendo i tag li e /li ho notato che aggiunge semplicemente il "punto" all'inizio dei due links, oppure fa anche qualcos'altro?

**funcool** · 11-01-2007, 10.59.41

Il tag li è la cosa da mettere tra i tag ol e ul perché determinano ogni elemento dei due tipi di elenco.

**silverseraph** · 11-01-2007, 15.21.09

se non vuoi i puntini, nel CSS inserisci: list-style-type: none;

18-01-2007, 22.04.26

Ho modificato ulteriormente lo script, ecco la pagina:
PAGINA
Cliccando Nhegh ghghgh 1,2 e 3, si apre il menù ad albero.
Quello che vorrei sapere è come dovrei fare per far allineare a sinistra i link (Link 1, Link 2), perchè adesso sono allineati al centro.

Ecco la parte iniziale del codice relativo alla 1° Macro-Sezione

Codice HTML:

<script type="text/javascript"> 
var frame_open = true; function open (id) { if (frame_open) { document.getElementById ("frame" + id).style.display = "block"; }
 else { document.getElementById ("frame" + id).style.display = "none"; } frame_open = !frame_open; } 
</script> 
<table style="text-align: left; background-color:#000000;" border="0" cellpadding="0" cellspacing="1">  
<img src="../menu/button.JPG"><br>
<tr>
<td style="text-align: left; background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(1)">Nhegh ghghgh 1</a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730; vertical-align: top;">
<div id="frame1" style="display: none; position: relative;">
<ul class="submenu"> 
<a href="#">&raquo; Link1</a><br>
<a href="#">&raquo; Link2</a>
</ul>
</div>
</td>
</tr>

Nella parte
<div id="frame1" style="display: none; position: relative;">
ho provato a scrivere left invece di relative, ma non è cambiato nulla.

**funcool** · 19-01-2007, 19.49.06

Prova a scrivere in quel div: "text-align:left;".

20-01-2007, 00.53.55

L'ho cambiato in questo modo:

Codice HTML:

<div id="frame1" style="display: none; text-align: left; position: relative;">
<ul class="submenu"> 
<a href="#">&raquo; Link1</a><br>
<a href="#">&raquo; Link2</a>

Ma non è cambiato nulla.

**bastardofuori** · 20-01-2007, 01.04.37

Il problema sta nel tag <ul> se lo rimuovi cosa succede?

EDIT: rimuovilo che funziona...
Ciao ciao...

20-01-2007, 01.52.02

Si, eliminando il tag ul funziona.
Thank you

**bastardofuori** · 20-01-2007, 01.56.58

Originalmente inviato da PSW

Si, eliminando il tag ul funziona.
Thank you

Di niente ciao

24-03-2007, 14.13.26

Dopo vari esperiementi sono riuscito ad avere questo risultato:
pagina
Questo è una parte del codice (la parte iniziale).

Codice HTML:

<script type="text/javascript"> 
var frame_open = true; function open (id) { if (frame_open) { document.getElementById ("frame" + id).style.display = "block"; }
 else { document.getElementById ("frame" + id).style.display = "none"; } frame_open = !frame_open; } 
</script> 
<table style="text-align: left; background-color:#000000;" border="0" cellpadding="0" cellspacing="1">  
<tr><td style="text-align: left; background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(1)"><b>GUADAGNA ONLINE</b></a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730">
<div id="frame1" style="display: none; text-align: left; position: relative;">
<a href="index.php?pagina=Extra/Guadagna/introduzione">&raquo; Introduzione</a><br>
<a href="index.php?pagina=Extra/Guadagna/conto">&raquo; Crea il tuo conto</a><br>
<a href="index.php?pagina=Extra/Guadagna/navigando">&raquo; Navigando</a><br>
<a href="index.php?pagina=Extra/Guadagna/leggendo">&raquo; Leggendo E-Mail</a><br>
</div>
</td>
</tr>
<tr>
<td style="background-color:#e7c730; vertical-align: top;">
<center><img alt="BURNOUT" src="Immagini/Series/b_burnout.gif"></center></td>
</tr>
<tr><td style="text-align: left; background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(2)"><b>BURNOUT 5</b></a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730">
<div id="frame2" style="display: none; text-align: left; position: relative;">
<a href="http://www.psw.altervista.org/_altervista_ht/gallery/?dir=Burnout_5"target=blank">&raquo; Immagini</a><br>
</div>
</td>
</tr>

<tr><td style="text-align: left; background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(3)"><b>BURNOUT DOMINATOR</b></a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730">
<div id="frame3" style="display: none; text-align: left; position: relative;">
<a href="index.php?pagina=Burnout/Dominator/info">&raquo; Info</a><br>
<a href="http://www.psw.altervista.org/_altervista_ht/gallery/?dir=Burnout_Dominator"target=blank">&raquo; Immagini</a><br>
<a href="index.php?pagina=Burnout/Dominator/soundtrack">&raquo; Soundtrack</a><br>
</div>
</td>
</tr>

<tr><td style="text-align: left; background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(4)"><b>BURNOUT REVENGE</b></a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730">
<div id="frame4" style="display: none; text-align: left; position: relative;">
<a href="index.php?pagina=Burnout/Revenge/info">&raquo; Info</a><br>
<a href="http://www.psw.altervista.org/_altervista_ht/gallery/?dir=Burnout_Revenge"target=blank">&raquo; Immagini</a><br>
<a href="index.php?pagina=Burnout/Revenge/lista">&raquo; Lista Auto</a><br>
<a href="index.php?pagina=Burnout/Revenge/circuiti">&raquo; Lista Circuiti</a><br>
<a href="index.php?pagina=Burnout/Revenge/soundtrack">&raquo; Soundtrack</a><br>
</div>
</td>
</tr>
<tr>
<td style="background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(5)"><b>BURNOUT LEGENDS</b></a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730">
<div id="frame5" style="display: none; text-align: left; position: relative;">
<a href="index.php?pagina=Burnout/Legends/info">&raquo; Info</a><br>
<a href="http://www.psw.altervista.org/_altervista_ht/gallery/?dir=Burnout_Legends"target=blank">&raquo; Immagini</a><br>
<a href="index.php?pagina=Burnout/Legends/circuiti">&raquo; Lista Circuiti</a><br>
<a href="index.php?pagina=Burnout/Legends/soundtrack">&raquo; Soundtrack</a><br>
</div>
</td>
</tr>
<tr>
<td style="background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(6)"><b>BURNOUT 3</b></a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730">
<div id="frame6" style="display: none; text-align: left; position: relative;">
<a href="index.php?pagina=Burnout/Burnout3/info">&raquo; Info</a><br>
<a href="http://www.psw.altervista.org/_altervista_ht/gallery/?dir=Burnout_3"target=blank">&raquo; Immagini</a><br>
<a href="index.php?pagina=Burnout/Burnout3/lista">&raquo; Lista auto</a><br>
<a href="index.php?pagina=Burnout/Burnout3/circuiti">&raquo; Lista Circuiti</a><br>
<a href="index.php?pagina=Burnout/Burnout3/soundtrack">&raquo; Soundtrack</a><br>
</div>
</td>
</tr>
<tr>
<td style="background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(7)"><b>BURNOUT 2</b></a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730">
<div id="frame7" style="display: none; text-align: left; position: relative;">
<a href="index.php?pagina=Burnout/Burnout2/info">&raquo; Info</a><br>
<a href="http://www.psw.altervista.org/_altervista_ht/gallery/?dir=Burnout_2"target=blank">&raquo; Immagini</a><br>
<a href="index.php?pagina=Burnout/Burnout2/lista">&raquo; Lista Auto</a><br>
<a href="index.php?pagina=Burnout/Burnout2/circuiti">&raquo; Lista Circuiti</a><br>
</div>
</td>
</tr>
<tr>
<td style="background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(8)"><b>BURNOUT</b></a><br>
</td>
</tr>
<tr>
<td style="text-align: left; background-color:#e7c730">
<div id="frame8" style="display: none; text-align: left; position: relative;">
<a href="index.php?pagina=Burnout/Burnout/info">&raquo; Info</a><br>
<a href="http://www.psw.altervista.org/_altervista_ht/gallery/?dir=Burnout"target=blank">&raquo; Immagini</a><br>
<a href="index.php?pagina=Burnout/Burnout/circuiti">&raquo; Lista Circuiti</a><br>
</div>
</td>
</tr>

<tr>
<td style="background-color:#e7c730; vertical-align: top;">
<center><img alt="FAST AND FURIOUS" src="Immagini/Series/b_faf.gif"></center>
</td></tr>
<tr><td style="text-align: left; background-color:#e7c730; vertical-align: top;">
<a href="javascript:open(9)"><b>TOKYO DRIFT</b></a><br>
</td></tr><tr>
<td style="text-align: left; background-color:#e7c730; vertical-align: top;">
<div id="frame9" style="display: none; text-align: left; position: relative;">
<a href="index.php?pagina=Faf/Tokyodrift/info">&raquo; Info</a><br>
<a href="http://www.psw.altervista.org/_altervista_ht/gallery/?dir=FaF_Tokyo_Drift"target=blank">&raquo; Immagini</a><br>
<a href="index.php?pagina=Faf/Tokyodrift/lista">&raquo; Lista auto</a><br>
<a href="index.php?pagina=Faf/Tokyodrift/tuningshop">&raquo; Tuning Shop</a><br>
<a href="index.php?pagina=Faf/Tokyodrift/crew">&raquo; Lista Crew</a><br>
<a href="index.php?pagina=Faf/Tokyodrift/soundtrack">&raquo; Soundtrack</a>
</div>
</td>
</tr>

Vorrei sapere da voi se c'è qualche modifica da fare al codice che permetta di fare in modo cge se uno clicca su uno dei collegamenti (aprendolo e facendo visualizzare i link)questo rimanga aperto fin quando uno non lo richiude, invece di doverlo aprire ogni volta che si aggiorna la pagina.

**funcool** · 24-03-2007, 17.48.57

Originalmente inviato da PSW

Vorrei sapere da voi se c'è qualche modifica da fare al codice che permetta di fare in modo cge se uno clicca su uno dei collegamenti (aprendolo e facendo visualizzare i link)questo rimanga aperto fin quando uno non lo richiude, invece di doverlo aprire ogni volta che si aggiorna la pagina.

Basta che togli a quello che deve restare aperto "display: none;".

P.S.: Bello il metodo che hai inventato per fare UP.

Discussione: Menù ad Albero da modificare

LinkBack

Strumenti discussione

Display

Menù ad Albero da modificare

Menu Codice Modificato

Regole di scrittura