aiuto con border radius e menù a tendina

[leaf]

ciao, come vedete in figura..vorrei arrotondare gli angoli nei cerchi rossi e appiattire quello nel cerchio giallo. Non riesco però ad identificare il primo elemento delle 2 tendine e l'ultimo elemento della seconda tendina. Ho fatto un jsfiddle. la situazione si presenta nel menù five -> sub_2

http://jsfiddle.net/jzus4wo6/3/



questo è il mio html

<div id='menu'>
<ul>
    <li class='active'><a href='h.php'>one</a>
        <ul>
            <li><a href='c.php'>Pro</a>
            </li>
            <li><a href='lo.php'>LO</a>
            </li>
        </ul>
    </li>
    <li><a>two</a>
        <ul>
            <li><a href='so.php'>Nel</a>
            </li>
            <li><a href='li.php'>Da</a>
            </li>
            <li><a href='con.php'>C</a>
            </li>
        </ul>
    </li>
    <li><a>three</a>
        <ul>
             <li><a href='in.php'>Nuo</a>
             </li>
        </ul>
    </li>
        <li><a>four</a>
        <ul>
            <li><a href='mo.php'>V</a>
            </li>
            <li><a href='mo.php'>Ins</a>
            </li>
            <li><a href='mo.php'>hey</a>
            </li>
        </ul>
    </li>
    <li><a href='fa.php'>five</a>
        <ul>
            <li><a>sub_1</a></li>
            <li><a>sub_2</a>
                <ul>
                    <li><a href='f.php'>1</a>
                    </li>
                    <li><a href='fi.php'>2</a>
                    </li>
                    <li><a href='u.php'>3</a>
                    </li>
                </ul>
            </li>
            <li><a>sub_3</a></li>
            <li><a>sub_4</a></li>
            <li><a>sub_5</a></li>
            <li><a>sub_6</a></li>
        </ul>
    </li>
    <li><a href ='Y.php'>six</a>
    </li>
</ul>
</div>

e il mio css

#menu ul{
  font-weight:normal;
  border: 0px solid black;
  line-height: 1;
  display: block;
  position: relative; /* relative */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}

#menu ul li a{
  font-weight:normal;
  margin: 0;
  padding: 0;
  border-bottom: 0px solid black;
  line-height: 1;
  display: block;
  position: relative; /* relative */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}


#menu ul{
list-style: none;
}


#menu:after,
#menu > ul:after {
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 1;
  height: 0;
}


#menu {
  background-color: transparent ;
  background-size:cover;
  background-repeat: no-repeat;
 }
 
 #menu ul > li:hover{ 
   background-color: #333333; 
 }
  

#menu > ul > li {
  float: left;
  border-radius:5px 5px 0px 0px;
}

#menu > ul > li:nth-child(6){ 
    border-radius: 5px 5px 5px 5px;
}


#menu > ul > li > ul > li:first-child{
    border-radius: 0px 5px 0px 0px !important;
}

#menu > ul > li > ul > li a:last-child{
    border-radius: 0px 0px 5px 5px;
}


#menu > ul > li > a {
    padding: 17px;
    font-size: 25px;
    text-decoration: none;
    color: #eeeeee;
}


#menu > ul > li:hover > a {
  color: #ff7e3d;
}


#menu ul ul {
  position: absolute;
  left: -9999px;
  float: left;
}


#menu ul ul li {
    position: relative;
    left: -40px;
    height: 0;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}


#menu li:hover > ul {
  left: auto;
}


#menu li:hover > ul > li {
  height: 35px;
}


#menu ul ul ul {
  margin-left: 100%;
  top: 0;
}


#menu ul ul li a {
  padding: 11px 15px;
  width: 150px;
  font-size: 18px;
  text-decoration: none;
  color: #eeeeee;
  background: #333333;
  z-index: 9999; 
}


#menu ul ul li:hover > a,
#menu ul ul li a:hover {
  color: #70d86c;
}

grazie

[KillerWorm]

Ciao, ho arrotondato gli angolini come chiedi... poi, visto che c'ero ho rivisto altre cose, giusto per... ad esempio quell'orrendo li:nth-child(6) che hai usato per arrotondare l'ultima voce principale, dal momento che risulta senza sottomenu (immagino si per quello, giusto?).. e se per caso un giorno decidi di riempire di sottomenu quella voce? o se decidi di inserire altre voci senza sottomenu? che fai, devi ogni volta modificare il css?

Comunque, prova così:

#menu ul{
  font-weight:normal;
  border: 0px solid black;
  line-height: 1;
  display: block;
  position: relative; /* relative */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}

#menu ul li a {
  font-weight:normal;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}

#menu ul {
  list-style: none;
}

#menu:after,
#menu > ul:after {
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 1;
  height: 0;
}

#menu {
  background-color: transparent ;
  background-size:cover;
  background-repeat: no-repeat;
}

#menu > ul > li:hover > a,
#menu > ul > li ul li a{ 
  background-color: #333; 
}

#menu > ul > li > a { 
  border-radius:5px 5px 0px 0px;
    padding: 17px;
    font-size: 25px;
    text-decoration: none;
    color: #eee;
}

#menu > ul > li > a:only-child { 
  border-radius: 5px;
}

#menu > ul > li {
  float: left;
}

#menu > ul > li:hover > a {
  color: #ff7e3d;
}

#menu > ul > li > ul li:first-child > a {
  border-top-right-radius: 5px;
}

#menu > ul > li > ul li:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#menu > ul > li > ul > li > ul li:last-child > a {
  border-bottom-left-radius: 0;
}

#menu ul ul {
  position: absolute;
  left: -9999px;
  float: left;
}

#menu ul ul li {
    position: relative;
    left: -40px;
    height: 0;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

#menu li:hover > ul {
  left: auto;
}

#menu li:hover > ul > li {
  height: 35px;
}

#menu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#menu ul ul li a {
  padding: 11px 15px;
  width: 150px;
  font-size: 18px;
  text-decoration: none;
  color: #eee;
  z-index: 9999; 
}

#menu ul ul li:hover > a,
#menu ul ul li a:hover {
  color: #70d86c;
}

[leaf]

grazie!!!!!!

1) per il fatto del titolo six singolo..in realtà quel titolo resterà sempre singolo e senza figli, comunque se ho visto beneè questo il codice che hai usato giusto?

#menu > ul > li > a:only-child { 
     border-radius: 5px;
}

che significa che se aggiungo altri titoli senza tendine, saranno tutti influenzati da questa pseudoclasse (che non conoscevo affatto, quindi grazie ), mentre se gli aggiungo una tendina questo non verrà utilizzato..giusto?

2) per quanto riguarda questo codice

#menu > ul > li > ul > li > ul li:last-child > a {
  border-bottom-left-radius: 0;
}

il mio problema è che non riuscivo ad identificare quel last child..quindi: quando usare l'operatore > e quando invece usare il semplice spazio (es ul > li oppure ul li)?

3) riguardo questo invece

li:last-child > a

non capisco perchè serva usare > a..cioè perchè non mi basta scrivere

li:last-child

? io devo selezionare l'ultimo figlio del tag <li> quindi perchè aggiungere >a ?

4) ultimissima domanda riguardo questo pezzo

#menu ul ul li {
    position: relative;
    left: -40px;
    height: 0;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

per far sì che le tendine fossero allineate (a sx) con il background (grigio) dei titoli, ho utilizzato

left: -40px

chiaramente quel -40px l'ho trovato provando vari numeri. C'è un modo per dirgli di farlo in automatico, senza dover specificare i pixels?


grazie!
L.

[KillerWorm]

Prego.
Premetto: per capire meglio alcuni punti, tieni presente questa particolare modifica che ho apportato

#menu > ul > li:hover > a,
#menu > ul > li ul li a{
  background-color: #333;
}

Questa regola attribuisce il colore di sfondo ai soli elementi <a> (contenuti dentro gli elementi <li>) in tutti i vari livelli del menu. Nel tuo codice invece applicavi lo sfondo in modi diversi per i vari livelli. In particolare sulle voci principali era applicato agli elementi <li> invece che agli <a>, e nel sottomenu (al secondo livello) fai un mix delle due cose. Meglio uniformare il tutto.

Ora rispondo ai punti:

1) Esatto. Nello specifico, il selettore :only-child trova tutte le corrispondenze in cui l'elemento specificato è figlio unico.
Per cui li > a:only-child seleziona solo gli elementi <a> che sono figli unici di <li>. L'arrotondamento completo è quindi applicato solo a tali elementi, sovrascrivendo la regola precedente (dove l'arrotondamento è applicato per i soli angoli superiori) che invece è applicata in tutti gli altri casi in cui <li> ha altri figli oltre il singolo <a>.
Dalla mia premessa puoi capire che in questo caso è essenziale applicare lo sfondo agli elementi <a> anziché ad <li>, in modo da poter poi definire l'arrotondamento a questi elementi, proprio perché potremo selezionarli nel modo appena indicato.

2) Il selettore > trova le corrispondenze in cui l'elemento specificato a destra è figlio diretto dell'elemento specificato a sinistra.
A differenza del selettore "spazio" per cui sono trovati tutti gli elementi discendenti (anche se non sono direttamente figli) dell'elemento che li contiene.
Il problema non era solo questo, chiaramente bisogna fare un po' di ragionamenti per trovare una soluzione che soddisfi al meglio le varie situazioni.
In questo caso ho usato una combinazione di regole per arrivare a quella soluzione (non è semplicemente: usare un selettore rispetto a l'altro).
In particolare bisogna vedere la regola precedente a quella che hai indicato, per cui inizialmente è applicato l'arrotondamento ai due angoli bassi di tutti i sottomenu (cioè i menu dal secondo livello in poi). Quindi, la regola che segue, va a sovrascrivere (azzerandolo) solo l'arrotondamento dell'angolo basso-sinistro (questo, solo per i menu di terzo livello... e qui entrano in gioco i due selettori appena citati).

3) Vedi premessa, poi punto 1 e in fine punto 2.
Chiarito il fatto che sfondo, e arrotondamenti, sia meglio applicarli ai soli elementi <a>, è necessario selezionare questi elementi.
In particolare li:last-child non seleziona l'ultimo figlio di <li> (come tu hai affermato) ma seleziona esattamente ogni elemento <li> che è, lui stesso, ultimo figlio del suo elemento genitore (vedi last-child). A questo punto, identificato l'ultimo <li>, vado a selezionare il suo figlio diretto <a>, da qui il selettore li:last-child > a.

4) Per il selettore #menu ul prova a sostituire list-style: none; con list-style-type: none;
Da quel che so, dovrebbe eliminare anche l'indentazione oltre al marcatore. Non chiedermi il perché?

Ho notato ora che hai duplicato quella regola e che l'hai applicata anche agli elementi <a>... chiaramente non serve, poi vedi tu.

[leaf]

risposta fantastica!

per vedere se ho capito, prendiamo questo codice d'esempio

<ul>
        <li>
             <a href='c.php'>uno</a>
        </li>
        <li>
             <a href='lo.php'>due</a>
        </li>
</ul>

1) se io scrivo

 ul:last-child

ottengo il secondo <li>

2) se scrivo

ul > li:last-child

seleziono entrambi i <li> (perchè entrambi sono < di ul e hanno un solo figlio che è quindi il loro ultimo)

3) se scrivo

 ul li:last-child

seleziono tutti i <li> che sono contenuti in un <ul> indipendentemente da quale livello appertengono

4) se dici che è meglio colorare lo sfondo dei soli <a> quindi gli altri tag del menù li uso solamente per definire la struttura (orizzontale con menù a cascata ecc) del menù giusto?

5) list-style-type non ha effetto..più che altro non capisco dove venga stabilito che i menu figli devono essere spostati verso destra rispetto ai padri..

6) in questo caso c'è un div con un id (#menu). va bene o sarebbe meglio usare una classe? oppure sarebbe meglio usare id diversi per ogni parte del menù (ul, li, a)? insomma, c'è un metodo generale da seguire?

grazie, se passi dalle mie parti ti devo una birretta

[KillerWorm]

No, evidentemente la mia risposta non era così fantastica perché alcuni punti non ti sono ancora chiari.

1) Hai dato uno sguardo alla pagina della guida di cui ho postato il link sopra? (vedi last-child)

The :last-child selector matches every element that is the last child of its parent.

Tradotto:
Il selettore :last-child trova le corrispondenze in cui l'elemento è l'ultimo figlio del suo genitore.

Scrivendo ul:last-child, non ottieni affatto il secondo <li> (a meno che non intendessi scrivere li:last-child), ma vai a selezionare proprio l'elemento <ul> che risulta essere l'ultimo figlio del suo elemento contenitore. In questo caso non hai specificato quale sia l'elemento contenitore, per cui sono selezionati tutti gli elementi <ul> che risultano essere gli ultimi all'interno del proprio contenitore (qualsiasi esso sia). Nel tuo esempio sarà quindi selezionato l'intero blocco <ul>, che risulta essere l'ultimo e unico figlio di qualcosa (poi è chiaro che sarebbe meglio analizzare l'esempio in un conteso più completo per non lasciare spazio a possibili ed eventuali ambiguità).

Facendo un esempio, se avessi più blocchi <ul> (mettendo il caso che siano tutti direttamente dentro <body>) sarà selezionato l'intero blocco <ul> che risulta essere l'ultimo tra tutti gli elementi <ul> (presenti, in questo caso, nel <body>).

Nel tuo esempio sarà quindi selezionato l'intero blocco, se quello è l'ultimo o l'unico dentro il suo contenitore.

Per selezionare l'ultimo <li> puoi invece usare li:last-child, che è una forma generale.
Lo stesso risultato puoi comunque ottenerlo con diverse altre forme, più specifiche, ad esempio quelle da te indicate:
ul li:last-child
ul > li:last-child

Entrambe hanno, tra i criteri di ricerca, delle restrizioni maggiori rispetto alla forma generale, anche se in questo particolare caso sarebbero delle restrizioni pressoché ininfluenti dato che si otterrebbe (e ribadisco, "in questo particolare caso") lo stesso risultato della forma più generale.

Ti spiego perché:

li:last-child trova qualsiasi <li> che risulta essere ultimo figlio dentro il suo contenitore (è intrinseco il fatto che un elemento <li> stia dentro un elemento <ul> oppure <ol>)

ul li:last-child trova qualsiasi <li>, ultimo figlio, che sta dentro un elemento <ul> (anche se questo non è un genitore diretto). In linea di massima, se nella tua pagina non hai elementi <ol>, che diversamente potrebbero far ottenere dei risultati inattesi, è chiaro che non ci sarà bisogno di specificare questa restrizione.

ul > li:last-child come nel precedente caso, trova qualsiasi <li>, ultimo figlio, che sta dentro un elemento <ul> ma che, in questo caso, ne sia anche fliglio diretto. In questo caso, tale restrizione, risulterà utile se si pensa di poter avere dei blocchi <ul> e/o <ol> annidati tra loro, in cui diversamente si potrebbero ottenere risultati inattesi.

Dal momento che hai a che fare con blocchi <ul> annidati, è meglio specificare in modo preciso i vari criteri dei diversi selettori. Chiaramente bisogna capire bene cosa vuoi ottenere e come ottenerlo.

2) No, come appena visto nel punto 1, ul > li:last-child trova solo l'ultimo <li>, contenuto in <ul>, che è anche suo figlio diretto. Per cui, nel tuo esempio viene selezionato solo l'ultimo elemento <li> e non entrambi.

3) Ancora no, ottieni lo stesso risultato del punto 2 (se si prende in considerazione il tuo codice d'esempio), per cui viene selezionato ancora solo l'ultimo <li>.

4) Non ho capito cosa vorresti sapere di preciso. Mi pare di notare una certa perplessità su questo punto, ma le due cose devono essere prese in modo separato.
A prescindere dalla struttura del menu (cioè dalla struttura html con cui sono organizzati i dati), che resta tale (e che non è da confondere col layout, cioè la struttura grafica), dico che conviene colorare lo sfondo dei soli tag <a> per i motivi che già ho indicato nel post precedente: ottenere maggiore uniformità nell'impostazione del css e poter strutturare dei selettori che permettano di selezionare, in modo più mirato, particolari elementi.
In qualunque caso, che lo sfondo sia applicato ad uno o all'altro elemento (o ad entrembi, in modo casuale o alternto o secondo qualsivoglia criterio), non c'è una particolare correlazione tra le due cose perché tutti i vari elementi ti servono comunque per definire la struttura (sia la struttura html, sia il layout).

5) Hai ragione, non so perché ma quando lo avevo provato sembrava funzionare. Ad ogni modo puoi risolvere con padding-left:0;
Ti posto l'intero css che ho riveduto, sperando di non aver tralasciato qualcosa:

/* --- BLOCCHI ul --- */

#menu ul{
  display: block;
  font-weight:normal;
  line-height: 1;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* --- COLORE DI SFONDO --- */

#menu > ul > li:hover > a,
#menu > ul > li ul > li > a {
  background-color: #333;
}

/* --- ELEMENTI a --- */

#menu ul > li a {
  display: block;
    text-decoration: none;
}

/* --- LIVELLO 1 - STRUTTURA ORIZZONTALE --- */

#menu > ul > li {
  float: left;
}

/* --- LIVELLO 1 - ELEMENTI a --- */

#menu > ul > li > a {
  border-radius:5px 5px 0px 0px;
    padding: 17px;
    font-size: 25px;
    color: #eee;
}

#menu > ul > li:hover > a {
  color: #ff7e3d;
}

/* --- LIVELLO 1 - ELEMENTI VUOTI --- */

#menu > ul > li > a:only-child {
  border-radius: 5px;
}

/* --- LIVELLO 2+ - ELEMENTI a --- */

#menu > ul > li > ul > li a {
  padding: 11px 15px;
  width: 150px;
  font-size: 18px;
  text-decoration: none;
  color: #eee;
  z-index: 9999;
}

#menu > ul > li > ul > li:hover > a,
#menu > ul > li > ul > li a:hover {
  color: #70d86c;
}

/* --- LIVELLO 3 - POSIZIONAMENTO TENDINA --- */

#menu > ul > li > ul > li ul {
  margin-left: 100%;
  top: 0;
}

/* --- TENDINE --- */

#menu > ul > li ul {
  position: absolute;
  float: left;
  visibility: hidden;
}
#menu > ul > li ul > li {
    position: relative;
    height: 0;
    -webkit-transition: height .35s ease;
     -moz-transition: height .35s ease;
      -ms-transition: height .35s ease;
       -o-transition: height .35s ease;
          transition: height .35s ease;
}

/* --- TENDINE - ANGOLI ARROTONDATI --- */

#menu > ul > li > ul li:first-child > a {
  border-top-right-radius: 5px;
}

#menu > ul > li > ul li:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#menu > ul > li > ul > li > ul li:last-child > a {
   border-bottom-left-radius: 0;
}

/* --- APERTURA TENDINE --- */

#menu ul > li:hover > ul {
  visibility: visible;
}
#menu ul > li:hover > ul > li {
  height: 35px;
}

6) Non penso ci siano delle regole standard da seguire, più che altro si adoperano delle convenzioni adeguandole a seconda dei casi e delle proprie esigenze. Personalmente credo che quella struttura possa andare bene, poi devi valutare tu.

...grazie per la birra

[leaf]

ok..ho capito..questo topic è oro grazie di nuovo!!
L.

edit: ti faccio l'ultima domanda, anche se forse dovrei aprire un altro topic..se io volessi far comparire questo menù attaccato a fondo pagina (quindi al cotnrario, con le tendine verso l'alto)? dovrei cambiare i margin?

[KillerWorm]

ti faccio l'ultima domanda, anche se forse dovrei aprire un altro topic..se io volessi far comparire questo menù attaccato a fondo pagina (quindi al cotnrario, con le tendine verso l'alto)? dovrei cambiare i margin?

In quel caso dovresti cambiare un po' di cose tra posizionamenti e angoli arrotondati in modo ribaltato... forse i margini sono una delle poche cose che resta invariata.
Non dico che sia impossibile ma nemmeno così semplice.

[WottaFacca]

ok..ho capito..questo topic è oro grazie di nuovo!!
L.

edit: ti faccio l'ultima domanda, anche se forse dovrei aprire un altro topic..se io volessi far comparire questo menù attaccato a fondo pagina (quindi al cotnrario, con le tendine verso l'alto)? dovrei cambiare i margin?

Posso dirti che, modificando il valore di position in fixed e aggiungendo bottom: 0; il menù andrà in basso, però poi ci sarà da modificare il resto.

Inserisci questo al posto di quello che hai adesso

#menu ul{
  font-weight:normal;
  border: 0px solid black;
  line-height: 1;
  display: block;
  position: fixed; 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
bottom: 0;
}

[leaf]

ok grazie..proverò a modificare le tendine e farle apparire verso l'alto
grazie,
L.