Menù a tendina orizzontale a comparsa CSS

Discussioni inerenti lo sviluppo di markup XHTML e CSS validi.

Moderatori: antoscarface, Kagemitsu

Regole del forum
Per scrivere del codice all'interno di ogni post, utilizzare il tag: [syntax=il_linguaggio]codice[/syntax] sostituendo "il_linguaggio" con il linguaggio del codice che dovete inserire, ad esempio: html, css, javascript, php, asp, ecc...

Menù a tendina orizzontale a comparsa CSS

Messaggioda lucaeffe » giovedì 1 luglio 2010, 12:57

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
lucaeffe

Avatar utente
 
Messaggi: 38
Iscritto il: martedì 16 marzo 2010, 12:25

Re: Menù a tendina orizzontale a comparsa CSS

Messaggioda nando » giovedì 1 luglio 2010, 13:52

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.
nando

Amministratore

Avatar utente
 
Messaggi: 575
Iscritto il: giovedì 8 ottobre 2009, 1:33
Località: Italy

Re: Menù a tendina orizzontale a comparsa CSS

Messaggioda JustB » giovedì 1 luglio 2010, 15:45

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 ]
  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.
Saluti,
Just
JustB

Avatar utente
 
Messaggi: 127
Iscritto il: martedì 26 gennaio 2010, 13:51
Località: Sant'Antimo [Napoli]

Re: Menù a tendina orizzontale a comparsa CSS

Messaggioda lucaeffe » sabato 17 luglio 2010, 22:22

Grazie mille.
lucaeffe

Avatar utente
 
Messaggi: 38
Iscritto il: martedì 16 marzo 2010, 12:25


Torna a XHTML & CSS