menu a comparsa

**holden_1972** · 30-09-2005, 14:11

Ho realizzato dei menù con i css a comparsa, ma ho dovuto aggiungere un pezzo di javascript ahimé, linguaggio che conosco poco.
Questo è il pezzo di codice js:

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;

In sostanza i menù sono più di uno e sono identificati da 'nav'. Perché funzionino tutti occorre che il codice tenga conto di altri id, diversi da nav, spero di essere stato chiaro ma sarò più preciso se non si capisce bene il problema, grazie,

nicola

**holden_1972** · 30-09-2005, 21:07

Questo è il menù a comparsa:

codice:

<ul id=nav>
    <li >E. Dickinson
    <ul> 
    <li >Poesia[/list]
    [/list]

**Xinod** · 01-10-2005, 01:19

-> quindi e' uno e si chiama nav
-> quindi non capisco

i menù sono più di uno e sono identificati da 'nav'. Perché funzionino tutti occorre che il codice tenga conto di altri id, diversi da nav

-> quindi e' il caso di essere molto + preciso, link alla pagina o tutto il codice influente

**holden_1972** · 01-10-2005, 13:42

ok, posto tutto il codice della pagina:

codice:

<?include("config.php");
include("errore.php");
require("connessione.php");
?>

<script language="javascript">
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;

</script>
  <style type="text/css">
  


A {
  color: coral;
  font-weight : bold;
}

A:Hover {
  text-decoration: none;
  color: White;
  background-color : Navy;
}
h2{
font:18px verdana, helvetica, sans-serif;
color:#ffffff;
background:coral;
float: left;
text-transform:capitalize
}

 
.testo_centro { font-family: verdana; font-size:10px; width: 235px; padding:3px;
 border:2px solid #000; background: white}

ul {
  margin: 1;
  padding: 0;
  list-style: none;
  width: 120px;
  border-bottom: 1px solid #ccc;
  }

ul li {
  position: relative;
  }
li ul {
  position: absolute;
  left: 120px;
  top: 0;
  display: none;
  }
ul li a {
  display: block;
  text-decoration: none;
  color: black;
  background: #fff;
  padding: 1px;
  border: 1px solid black;
  border-bottom: 0;
  }
li:hover ul, li.over ul { 
  display: block; }
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */


.testate {
  color: black;
  background: #00BBD8;
  padding: 3px;
  border: 1px solid white;
  width:120px;
  height:30px;
  font: verdana;
  font-size: 18px;

}
 </style>
</head>
<body background="sfondo21.jpg" align="center">
<div Style="position:absolute; left:190px; top:5px;">
[img]barra.gif[/img]
</div>





<div style="position:absolute; left:275px; top:230px">
<div class="testo_centro">
Novità  19 Agosto 2005:
Le novità sono due: il sito ha cambiato nome, è diventato semplicemente holden.
La seconda novità è che il nome vecchio è assegnato ora ad un sito che ho realizzato
per un'associazione di utenti della salute mentale di Spezia e provincia, una rete di
amici, una rete di persone che ascoltano chi sta soffrendo come me, come noi.
Se avete qualche disturbo psichico, se siete depressi/e, se vi sentite emarginati
qui troverete uno spazio in cui scrivere, sfogare tutto quello che avete dentro e
ascoltare al contempo le storie degli altri. Ho messo il link anche tra i preferiti
ma lo metto anche qui: http://www.mondodiholden.altervista.org.
</div>


</div>
<div style="position:absolute; left:190px; top:630px">
<script language="javascript" type="text/javascript">
document.write('<s'+'cript language="javascript" src="http://ad.altervista.org/alternet.ad?c=2&f=0&'+new Date().getTime()+'"><\/s'+'cript>');
</script></div>

<div style="position:absolute; left:120px; top:220px">
<div class=testate>
Recensioni
</div>
</div>
<div style="position:absolute; left:120px; top:415px">
<div class=testate>
Links
</div>
</div>
<div style="position:absolute; left:120px; top:460px">
<!--<div id="menubot">
IBS.IT
PICKWICK
RATM
METALLICA
ALTERVISTA
MONDO DI HOLDEN
</div>
-->
<ul >[*]IBS.IT[*]Pickwick[*]RATM[*]Metallica[*]Altervista[*]Il Mondo di Holden[/list]

</div>
<div style="position:absolute; left:120px; top:267px">
<!--<div id="menubot">
FRANCIA
GERMANIA
ITALIA
HORROR
RUSSIA
GB E USA
</div>-->
<ul id="nav">[*]Francia
    <ul >
    <? $query = "select * from scritti where nazione = 'francia'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][*]Germania
      <ul> 
        <? $query = "select * from scritti where nazione = 'germania'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list]
     [*]Italia
      <ul> 
        <? $query = "select * from scritti where nazione = 'italia'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list]
    [*]Gran Bretagna
        <ul> 
        <? $query = "select * from scritti where nazione = 'gb'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list]
    [*]Russia
        <ul> 
        <? $query = "select * from scritti where nazione = 'russia'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list]
    [*]Horror
        <ul> 
        <? $query = "select * from scritti where nazione = 'horror'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list]
        [/list]

</div>



<div style="position:absolute; left:550px; top:220px">
<div class=testate>
Racconti
</div>
</div>
<div style="position:absolute; left:550px; top:265px">
<!--<div id="menubot">
HORROR
AMORE
GENERICI
</div></div>
-->
<ul id=nav>[*]Horror
    <ul >
    <? $query = "select * from scritti where genere = 'horror'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][*]Amore
    <ul >
    <? $query = "select * from scritti where genere = 'amore'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][*]Generici
    <ul >
    <? $query = "select * from scritti where genere = 'vari'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][/list]
</div>
<div style="position:absolute; left:550px; top:345px">
<div class=testate>
Poesie e altro
</div>
</div>
<div style="position:absolute; left:550px; top:390px">
<!--<div id="menubot">
SCRITTI VARI
POESIE MIE
E. DIKINSON
A. ACHMATOVA
D. THOMAS
J.PREVERT
</div>
-->
<ul id=nav>
    <li >E. Dickinson
    <ul id=nav>
    <?
    $query = "select * from scritti where tipo = 'poesia' and autore = 'emily dickinson'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];

        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][*]Scritti vari
    <ul >
    <? $query = "select * from scritti where autore = 'nicola pasa' and tipo = 'scritto'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][*]Anna Achmatova
    <ul >
    <? $query = "select * from scritti where tipo = 'poesia' and autore = 'anna achmatova'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][*]Dylan Thomas
    <ul >
    <? $query = "select * from scritti where tipo = 'poesia' and autore = 'dylan thomas'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][*]Jacques Prevert
    <ul >
    <? $query = "select * from scritti where tipo = 'poesia' and autore = 'jacques prevert'";
       $result= mysql_query($query, $db);

       while ($row=mysql_fetch_array($result))
       { $codice = $row['codice'];
         $titolo = $row['titolo'];
        ?>
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][/list]
</div>

<div style="position:absolute; left:580px; top:540px">
<a href="http://www.emergency.it">
[img]logo80x24.gif[/img]</a>
</div>



</body>
</html>

Ciao e grazie,

nicola

**Xinod** · 01-10-2005, 13:57

postando il php non ci rendi molto veloce la lettura del codice

**holden_1972** · 01-10-2005, 14:05

Originariamente inviato da Xinod
postando il php non ci rendi molto veloce la lettura del codice

Ok, lo tolgo:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html lang="it">
<head>


<script language="javascript">
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;

</script>
  <style type="text/css">
  


A {
  color: coral;
  font-weight : bold;
}

A:Hover {
  text-decoration: none;
  color: White;
  background-color : Navy;
}
h2{
font:18px verdana, helvetica, sans-serif;
color:#ffffff;
background:coral;
float: left;
text-transform:capitalize
}
#menubot a
{
display:block;
width:130px;
color:white;
font:9px verdana, helvetica, sans-serif;
height:2em;line-height:2em;/* altezza del link: height e line-height devono avere il medesimo valore */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
text-decoration:none; /* elimina la sottolineatura */
border: 2px outset #37006E;
background-color: sfondo6.gif;
font-weight:bold;
}
#menubot a:hover
{
display:block;
width:130px;
color:black;
font:9px verdana, helvetica, sans-serif;
height:2em;line-height:2em;/* altezza del link: height e line-height devono avere il medesimo valore */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
font-weight:bold;
text-decoration:none; /* elimina la sottolineatura */
border: 2px inset black;
  background-color: white
} 









}
#box {  
  width:220px;  
  color:white;
  background:coral;border:2px dashed coral;  
  font:10px verdana, sans-serif;
  font-weight:bold;
  padding:10px;
}   
.testo_centro { font-family: verdana; font-size:10px; width: 235px; padding:3px;
 border:2px solid #000; background: white}

ul {
  margin: 1;
  padding: 0;
  list-style: none;
  width: 120px;
  border-bottom: 1px solid #ccc;
  }

ul li {
  position: relative;
  }
li ul {
  position: absolute;
  left: 120px;
  top: 0;
  display: none;
  }
ul li a {
  display: block;
  text-decoration: none;
  color: black;
  background: #fff;
  padding: 1px;
  border: 1px solid black;
  border-bottom: 0;
  }
li:hover ul, li.over ul { 
  display: block; }
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */


.testate {
  color: black;
  background: #00BBD8;
  padding: 3px;
  border: 1px solid white;
  width:120px;
  height:30px;
  font: verdana;
  font-size: 18px;

}
 </style>
</head>
<body background="sfondo21.jpg" align="center">
<div Style="position:absolute; left:190px; top:5px;">
[img]barra.gif[/img]
</div>





<div style="position:absolute; left:275px; top:230px">
<div class="testo_centro">
Novità  19 Agosto 2005:
Le novità sono due: il sito ha cambiato nome, è diventato semplicemente holden.
La seconda novità è che il nome vecchio è assegnato ora ad un sito che ho realizzato
per un'associazione di utenti della salute mentale di Spezia e provincia, una rete di
amici, una rete di persone che ascoltano chi sta soffrendo come me, come noi.
Se avete qualche disturbo psichico, se siete depressi/e, se vi sentite emarginati
qui troverete uno spazio in cui scrivere, sfogare tutto quello che avete dentro e
ascoltare al contempo le storie degli altri. Ho messo il link anche tra i preferiti
ma lo metto anche qui: http://www.mondodiholden.altervista.org.
</div>


</div>
<div style="position:absolute; left:190px; top:630px">
<script language="javascript" type="text/javascript">
document.write('<s'+'cript language="javascript" src="http://ad.altervista.org/alternet.ad?c=2&f=0&'+new Date().getTime()+'"><\/s'+'cript>');
</script></div>

<div style="position:absolute; left:120px; top:220px">
<div class=testate>
Recensioni
</div>
</div>
<div style="position:absolute; left:120px; top:415px">
<div class=testate>
Links
</div>
</div>

<ul >[*]IBS.IT[*]Pickwick[*]RATM[*]Metallica[*]Altervista[*]Il Mondo di Holden[/list]

</div>
<div style="position:absolute; left:120px; top:267px">
<ul id="nav">[*]Francia
    <ul >
[*]<? echo "><? echo $titolo; ?>
        <?
       }
       ?>[/list][*]Germania
      <ul> 
        
[*]<? echo "><? echo $titolo; ?>
        [/list]
     [*]Italia
      <ul> 
       [*]<? echo "><? echo $titolo; ?>
        [/list]
    [*]Gran Bretagna
        <ul> 
       
[*]<? echo "><? echo $titolo; ?>
        [/list]
    [*]Russia
        <ul> 
        
[*]<? echo "><? echo $titolo; ?>
        [/list]
    [*]Horror
        <ul> 
       
[*]<? echo "><? echo $titolo; ?>
        [/list]
        [/list]

</div>



<div style="position:absolute; left:550px; top:220px">
<div class=testate>
Racconti
</div>
</div>

<ul id=nav>[*]Horror
    <ul >
    
[*]<? echo "><? echo $titolo; ?>
       [/list][*]Amore
    <ul >
    
[*]<? echo "><? echo $titolo; ?>
        [/list][*]Generici
    <ul >
    [*]<? echo "><? echo $titolo; ?>
        [/list][/list]
</div>
<div style="position:absolute; left:550px; top:345px">
<div class=testate>
Poesie e altro
</div>
</div>
<ul id=nav>
    <li >E. Dickinson
    <ul id=nav>
    
    
[*]<? echo "><? echo $titolo; ?>
       [/list][*]Scritti vari
    <ul >
    
[*]<? echo "><? echo $titolo; ?>
        [/list][*]Anna Achmatova
    <ul >
    
[*]<? echo "><? echo $titolo; ?>
       [/list][*]Dylan Thomas
    <ul >
    
[*]<? echo "><? echo $titolo; ?>
       [/list][*]Jacques Prevert
    <ul >
    
[*]<? echo "><? echo $titolo; ?>
        [/list][/list]
</div>

<div style="position:absolute; left:580px; top:540px">
<a href="http://www.emergency.it">
[img]logo80x24.gif[/img]</a>
</div>



</body>
</html>

Spero che sia più chiaro così, grazie,

Nicola

**Xinod** · 01-10-2005, 14:39

non e' corretto avere + di un elemento con stesso id (altrimenti che id sarebbe?)
quindi
- dove hai id="nav" sostituisci con class="nav"
- aggiusta di conseguenza il css:
dove hai #nav deve diventare .nav
- usa questa funzione che cicla x tutti gli ul della pagina, dove il className e' "nav" applica quello che gia' avevi scritto

codice:

startList = function() {
  if (document.all && document.getElementById && document.getElementsByTagName) {
    var uls=document.getElementsByTagName('ul');
    for(var k=0;k<uls.length;k++){
      if(uls[k].className=='nav'){
        navRoot=uls[k];
        for(var 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;

ciao

**holden_1972** · 01-10-2005, 14:59

Grazie mille, dopo provo,

nicola

Discussione: menu a comparsa

Strumenti discussione

Ricerca discussione

Visualizza

menu a comparsa

Re: menu a comparsa

Permessi di invio