costruzione menù

**sitodue** · 06-09-2012, 12:51

Ciao a tutti,
dopo aver visto tanti esempi di menù già pronti, per fare pratica sto provando a costruirne uno io...
Al momento il codice è banale ma ho già alcuni dubbi...

codice:

<style type="text/css">

#menu {border solid 2px #000}

#principale {list-style:none}

</style>
</head>

<body>
<div id="menu">
   <ul id="principlae">[*]Voce 1
         <ul>[*]Sottovoce 1[*]Sottovoce 2[/list]
      [*]Voce 2[*]Voce 3[/list]
</div>
</body>

1° dubbio:
in molti esempi vedo subito la regola:

codice:

#principale {display:block}

A cosa serve? Il tag ul non è già di tipo block?

2° dubbio:
Il modo corretto di allineare gli elementi principali sulla stessa linea è inserire solo float:left o anche "display:inline" ? In ogni caso, appena inserisco la regola

codice:

#principale > li {
   float:left;
   display:inline; /*con o senza questa regola */
}

le voci principali del menù risultano si allineate sulla stessa riga, ma non sono più contenute (graficamente) nel div principale, andando ad ancorarsi fuori da esso al suo margine inferiore, mentre io mi aspettavo che restassero al suo interno, ancorate al suo margine superiore.
Come mai si verifica questo comportamento e come posso evitarlo, volendo far si che tutto il menù sia in un div ben definito in modo da poterlo spostare facilmente in qualunque punto della pagina?
Grazie a tutti

**Prill** · 06-09-2012, 13:08

l'elenco è un elemento blocco, eventualmente il display:block lo specifichi sulle voci dell'elenco, cui dai poi un float per affiancarle, oppure le affianchi con un display:inline.
Quando usi il float su un elemento, lo sottrai al normale flusso della pagina, e per ripristinare quel flusso - in base al quale gli elementi vari che si susseguono nel codice si dispongono uno di seguito all'altro, e un contenitore si estende a inglobare il suo contenuto - devi interrompere il float usando un clear

**sitodue** · 06-09-2012, 14:03

Ciao,
prima di tutto grazie per la risposta;
non mi è chiaro quando dici:

"l'elenco è un elemento blocco, eventualmente il display:block lo specifichi sulle voci dell'elenco"

Per voci dell'elenco intendi i tag[*] ? Se si, non sono anch'essi elementi già di per se di tipo block? a che serve quindi specificare ancora display:block? Il mio dubbio era semmai, se indicare ai tag[*] anche la regola display:inline oltre a float:left (che a quanto pare è fondamentale per allineare correttamente gli elementi sulla stessa linea...) e cosa cambia inserendola o meno...

Il discorso sul flusso della pagina invece è grandioso e mi ha chiarito una volta per tutte a cosa serve clear!
E' corretto utilizzarlo in questo modo:

codice:

<style type="text/css">

#menu {border solid 2px #000}

#principale {list-style:none}

.clear{clear:both}

</style>
</head>

<body>
<div id="menu">
   <ul id="principlae">[*]Voce 1
         <ul>[*]Sottovoce 1[*]Sottovoce 2[/list]
      [*]Voce 2[*]Voce 3
      <li class="clear">[/list]
</div>
</body>

**Prill** · 06-09-2012, 19:06

Per voci dell'elenco intendi i tag[*] ? Se si, non sono anch'essi elementi già di per se di tipo block?

un elemento blocco è indipendente dagli altri, un "li" non può aversi in assenza di un elenco. E non è un elemento blocco anche se sembra comportarsi come tale (può contenere un elemento blocco e produce un ritorno a capo), di default ha un display:list-item. Il display:block serve a garantire da alcune diversità o incongruenze dei browser nel trattare gli elenchi.

Se usiamo un dispay:inline le voci elenco sono già affiancate e il float potrebbe essere superfluo, ma se abbiamo all'interno delle voci elenco dei link con un display:block il float ci garantirà che le voci elenco non vadano a capo a causa dei link

E' corretto utilizzarlo in questo modo:

codice:
...

Nel caso specifico dell'elenco, invece di inserire un tag li vuoto col clear, si potrà specificare sull'ul un'altezza e un overflow:hidden.

**sitodue** · 07-09-2012, 15:14

Nel caso specifico dell'elenco, invece di inserire un tag li vuoto col clear, si potrà specificare sull'ul un'altezza e un overflow:hidden.

Ciao,
grazie mille per le risposte, un po' alla volta sto andando avanti;
A cosa serve overflow:hidden?

Attualmente sono al punto in cui gestisco l'hover per i sottomenù (riporto solo il codice direttamente interessato

codice:

#menu > li:hover>ul {
    visibility:visible;
    position relative;
    left: -40px;
}

#menu li li:hover>ul {
    visibility:visible;
    position:relative;
    left:150px;
}


<body>
<div id="menu">
   <ul id="principlae">[*]Voce 1
         <ul>[*]Sottovoce 1
               <ul>[*]SottoSottoVoce1[*]SottoSottoVoce1[/list]
            [*]Sottovoce 2[/list]
      [*]Voce 2[*]Voce 3[/list]
</div>
</body>

La prima di quelle due regole funziona alla perfezione, ossia fa comparire il primo sottomenù, mentre la seconda non ha alcun effetto e credo sia sbagliata... Dovrei, in quel modo, raggiungere il secondo sottomenù al passaggio del mouse sui "li" contenuti in altri "li" ma credo di aver sbagliato la sintassi :-s

**Prill** · 10-09-2012, 20:57

A cosa serve overflow:hidden?

ti lascio un link al riguardo: http://colinaarts.com/articles/the-m...erflow-hidden/

La prima di quelle due regole funziona alla perfezione, ossia fa comparire il primo sottomenù, mentre la seconda non ha alcun effetto e credo sia sbagliata

penso che sarebbe più semplice prendere un menu su più livelli funzionante e fare tutte le prove su quello, attenzione anche alla compatibilità crossbrowser (verifica quali versioni di Explorer riconoscono la pseudoclasse hover su elementi diversi dai link)

Discussione: costruzione menù

Strumenti discussione

Ricerca discussione

Visualizza

costruzione menù

Permessi di invio