Menu compasa laterale e IE

**Kaneda_ITA** · 26-02-2006, 22:57

Ciao a tutti

Ho un piccolo problema con IE (strano vero?

)
Facendo questo tutorial, con i due browser seri (FireFox e Opera .ndr) funziona più o meno tutto a dovere, mentre con IE non funziona

Why?
I Fix, vanno messi in un punto preciso del codice? Vanno modificati? Perchè facendo copia e incolla del tutorial, non funziona

Conoscete altri tutorial per creare menù come questo?

Grazie mille

**Kaneda_ITA** · 26-02-2006, 23:12

Un altra cosa.. quando dice:

Inoltre dobbiamo associare il Javascript alla nostra ul principale, che diventa:

<ul id="nav">

Cosa bisogna fare di preciso? Perchè se scrivo <ul id="nav"> nel css separato da tutto mi distrugge il menù (diventa lungo quanto tutto lo schermo).

Tnx

**inter_91** · 27-02-2006, 21:28

Originariamente inviato da Kaneda_ITA
Un altra cosa.. quando dice:

Inoltre dobbiamo associare il Javascript alla nostra ul principale, che diventa:

<ul id="nav">

Cosa bisogna fare di preciso? Perchè se scrivo <ul id="nav"> nel css separato da tutto mi distrugge il menù (diventa lungo quanto tutto lo schermo).

Tnx

anch'io ho provato a creare questo menu...ci sono riuscito, ma ho lo stesso problema tuo..

con firefox funzione senza alcun problema!

tu il java-script dove lo insericsci?

ce qualcuno che ci potrebbe aiutare?

**Kaneda_ITA** · 27-02-2006, 23:16

Con Firefox, è perfetto. E' solo con IE che non funziona

Il fix, mi sa che è sbagliato...

**felixsuperstar** · 28-02-2006, 00:34

ho provato anche io..funziona..anche su Ie..
allora questo il codice (con css interno)

codice:

<!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">
<head>
  <title>Menu a comparsa laterale</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="drop_down.js"></script>
  <style type="text/css">
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
  </style>
</head>
<body>
<ul id="nav">[*]Home[*]About
    <ul>[*]History[*]Team[*]Offices[/list]
  [*]Services
    <ul>[*]Web Design[*]Internet Marketing[*]Hosting[*]Domain Names[*]Broadband[/list]
  [*]Contact Us
    <ul>[*]United Kingdom[*]France[*]USA[*]Australia[/list]
  [/list]
</body>
</html>

codice:

<script type="text/javascript" src="drop_down.js"></script>

questa dicitura indica che il javascript deve essere inserito esternamente..per cui copiate ed incollate questo nel blocco note:

codice:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

e salvatelo (salva come: tutti i file -non file di testo-) cosi:
drop_down.js
Naturalmente va inserito nella stessa cartella in cui si trova la pagina contenente il menù..

**inter_91** · 28-02-2006, 19:55

Originariamente inviato da felixsuperstar
ho provato anche io..funziona..anche su Ie..
allora questo il codice (con css interno)

codice:

<!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">
<head>
  <title>Menu a comparsa laterale</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="drop_down.js"></script>
  <style type="text/css">
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
  </style>
</head>
<body>
<ul id="nav">[*]Home[*]About
    <ul>[*]History[*]Team[*]Offices[/list]
  [*]Services
    <ul>[*]Web Design[*]Internet Marketing[*]Hosting[*]Domain Names[*]Broadband[/list]
  [*]Contact Us
    <ul>[*]United Kingdom[*]France[*]USA[*]Australia[/list]
  [/list]
</body>
</html>

codice:

<script type="text/javascript" src="drop_down.js"></script>

questa dicitura indica che il javascript deve essere inserito esternamente..per cui copiate ed incollate questo nel blocco note:

codice:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

e salvatelo (salva come: tutti i file -non file di testo-) cosi:
drop_down.js
Naturalmente va inserito nella stessa cartella in cui si trova la pagina contenente il menù..

Grazie mille!!funziona!

un'altra domanda...come posso fare che una tabella nel sito sfrutti tutta l'altezza? come per esempio html.it...parte da sopra fino a sotto, senza lasciare spazio...

**Kaneda_ITA** · 28-02-2006, 21:13

Grazie mille Felix

E io che sbattevo la testa sui fix

Un feedback positivo a te

**mex23** · 06-03-2006, 22:31

Ciao a tutti,
volevo sapere perche se aggiungo un ulteriore sottomenu tipo:

codice:

[*]Home [*]Prodotti 
    <ul> [*]Serie Maniglieria
	  	<ul>
			[*]Serie 111 acciaio inox 
      		[*]Serie 160 acciaio inox 
			[*]Serie 170 acciaio inox 
		[/list]
	  
.......
.......
....... [*]Serie Accessori Bagno
	  	<ul>
			[*]Serie 111 acciaio inox 
      		[*]Serie 160 acciaio inox 
			[*]Serie 170 acciaio inox 
			[*]Serie 180 Compound 
			[*]Serie 111 
			[*]Serie 130 
		[/list]
	   [*]Serie ENTRO
	  [/list]

Quando passo sul sottomenu Prodotti viene visualizzato il suo contenuto ma se passo sulle altre voci "Serie Sccessori Bogno" o "Serie Entro" rimane visualizzata la prima serie!!!
Come mai cosa sbaglio? grazie...

**mex23** · 07-03-2006, 21:07

...forse non mi sono spiegato bene!

Se creo il menu a 2 livelli funziona tutto bene, se aggiungo un ulteriore livello non funziona correttamente!
come si fa a creare un terzo livello?

Grazie

**Mich_** · 08-03-2006, 10:17

Originariamente inviato da mex23
...forse non mi sono spiegato bene!

Se creo il menu a 2 livelli funziona tutto bene, se aggiungo un ulteriore livello non funziona correttamente!
come si fa a creare un terzo livello?

Grazie

Occorre agiornare il CSS, applicando al terzo livello istruzioni analoghe a quelle del secondo.

Discussione: Menu compasa laterale e IE

Strumenti discussione

Ricerca discussione

Visualizza

Menu compasa laterale e IE

Ulteriore sottomenu

Permessi di invio