[lucaeffe]

Prendendo spunto dal menù di questo sito
http://www.selvanova.com/vini/ita/
sto tentando di ricreare il menu a tendina a comparsa.

Ho visto un po il codice tramite la sorgente pagina e ho impostato in questo modo il mio codice HTML

Codice: Seleziona tutto

<div  id="menu">

<ul><!--ul padre-->

<li><a href="#">L'azienda</a>
<ul>
<li><a href="#">La storia</a></li>
<li><a href="#">Le persone</a></li>
<li><a href="#">Mission e Vision</a></li>
</ul>
</li>

<li><a href="#">Prodotti e Marchi</a>
<ul>
<li><a href="#">Categoria1</a></li>
<li><a href="#">Categoria2</a></li>
<li><a href="#">Categoria3</a></li>
<li><a href="#">Categoria4</a></li>
<li><a href="#">Categoria5</a></li>
<li><a href="#">Categoria6</a></li>
<li><a href="#">Categoria7</a></li>
<li><a href="#">Categoria8</a></li>
<li><a href="#">Categoria9</a></li>
<li><a href="#">Categoria10</a></li>
</ul>
</li>

<li><a href="#">Servizi e Tecnologie</a>
<ul>
<li><a href="#">Servizi</a></li>
<li><a href="#">Tecnologie</a></li>
</ul>
</li>

<li><a href="#">Gallery</a>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">Case study</a></li>
</ul>
</li>


<li><a href="#">Testimonials</a>
<ul>
</ul>
</li>

<li><a href="#">Contatti</a>
<ul>
<li><a href="#">Dove siamo</a></li>
<li><a href="#">Calcola il percorso</a></li>
<li><a href="#">Richiedi Info</a></li>
</ul>
</li>

</ul><!--/ul padre-->
</div><!--/menu-->
<!---------------------------------------------------fine menu-->



Poi ho provato a scrivere qualche riga di CSS

Codice: Seleziona tutto

/*------------------------------Inizio menu*/
   
#menu{
        background:url(../img/menu.png);
        height:66px;
        width:100%;
         }

#menu ul{
}

#menu li{
        position: relative;
        float: left;
        list-style: none;
}

#menu li a{
width:184px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
color:#CCC;
}

#menu li a:hover{
background-color: red;
}



#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}

#menu ul li:hover ul{
visibility:visible;
}
       
            
       
/*------------------------------fine menu*/


Il menù funziona l'unica cosa che non mi riesce è quella di mettere le sottovoci in orizzontale.
P.S l'effetto con cui compaiono le sottovoci nel sito che ho linkato sopra si tratta di JS?
Nel sorgente mi sembra di vedere solo due js (jcarousel e Fancybox) che non sembrano per quell'effetto

[nando]

Ciao Luca, devi disporre la seconda lista (che sarebbe il menù a comparsa) in linea piuttosto che in blocco.

Prova ad aggiungere la proprietà "display:inline" (o "float:left;display:block;") alla seconda lista e vedi se ottieni ciò che desideri.

[JustB]

Ciao Luca, ti ha già risposto correttamente Nando per quanto riguarda il posizionamento orizzontale.
L'effetto che è proposto nel sito è realizzato tramite jQuery

Sintassi: javascript [ Scarica ] [ Nascondi ]

Sintassi: javascript [ Scarica ] [ Mostra ]

1. // menu
2.         $("#menu li.item").hover(function() {
3.                 $("#menu li.item.open").removeClass("open");
4.                 if ($("#menu_bar").hasClass("open")) {
5.                         $(this).addClass("open");
6.                 } else {
7.                         $(this).addClass("open");
8.                         $("#menu_bar").animate({height: "110px"}, 100);
9.                 }
10.     });
11.  
12.  

Questo pezzo di codice lo trovi all'interno della index e non in un file esterno (che è una pratica da disincentivare, dato che è sempre meglio separare i vari aspetti). Devo dire che non mi piace molto come è realizzato l'effetto nel sito: è troppo "scattoso" e non perdona l'utente che esce di un pixel fuori i bordi del menu.

[lucaeffe]

Grazie mille.