Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Applicare specifico allineamento per sottomenu aperti in dropdown

  1. #1

    Applicare specifico allineamento per sottomenu aperti in dropdown

    Salve, sto preparando un menu con effetto drop-down, e fino ad ora non ho riscontrato problemi.
    Vorrei solo che quando il mouse si trova sopra un elemento principale del menu, i sottomenù comparissero dentro ai relativi riquadri, solo che sulla destra (attualmente si aprono sulla sinistra).

    Ecco il mio codice:
    https://jsfiddle.net/33gw7ko2/

    Come è adesso:
    menu1.png

    Come vorrei che fosse:
    menu2.png



    Vi ringrazio in anticipo...

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,937
    [Mod]
    Menu con dropdown
    Ho corretto il titolo della discussione ma, ti prego, in futuro cerca di utilizzare titoli più esplicativi altrimenti sarò costretto a chiudere la discussione da regolamento (vedi regolamento di sezione). Grazie.
    [/Mod]

    Ciao, una soluzione può essere quella di applicare, a quel sottomenu, position:absolute (come è attualmente) e right:0, mentre alle voci del menu applicare position:relative.

    Nel tuo caso in particolare, però, questo comporta una catena di tante altre problematiche legate ad altre proprietà che in qualche modo creano dei conflitti con questo metodo, ma puoi comunque risolvere variando opportunamente qualche regola.

    Ti indico punto per punto cosa devi modificare; non ti nego che è un po' lungo da spiegare:

    • Prima cosa, aggiungi un nuovo selettore solo per le voci menu di destra; questo per poter gestire in modo differente le voci di destra da quelle di sinistra, perché presumo che questo allineamento, che stai cercando di ottenere, si debba applicare solo per le voci a destra della barra menu, in quanto per quelle a sinistra (in particolare la prima), se si applicasse quell'allineamento sul sottomenu, questo risulterebbe fuori dal margine sinistro della finestra. Correggimi se sbaglio o, nel caso, chiarisci meglio questo punto se il tuo intento è diverso.

      Ad ogni modo per ora procediamo così; quindi aggiungi questo nuovo selettore e applica right:0
      codice:
      .menu_bar li.right ul {
         right: 0;
      }
      Tenendo presente che per tutti gli elementi li hai già impostato position:absolute, questa nuova regola andrà ad allineare l'intero blocco del sottomenu (per le voci sulla destra) in modo che sia adiacente al "limite" destro e si sviluppi quindi verso sinistra...

      Ma al limite destro di cosa? Del suo genitore più prossimo che ha un valore di position diverso da static o, male che vada, al body.
      Apportando solo questa modifica quindi si dovrebbe portare a destra del body. Dovrai invece fargli capire che deve riferirsi al suo contenitore, cioè alla voce di menu.
      ...
    • Per ul.menu_bar li.right imposta quindi position:relative
      codice:
      ul.menu_bar li.right {
         position: relative;
      Ora il blocco del sottomenu è allineato a destra della voce di menu (come hai chiesto)... ma cosa succede? L'intero sottomenu sembra scomparso. Questo perché il tuo menu (il contenitore principale) ha un overflow:hidden che nasconde tutto ciò che sborda da lui, e ora è tagliato fuori anche il sottomenu.

      Ok, ma perché prima il sottomenu si vedeva anche se sbordava dal menu (così come si vedono anche i sottomenu delle voci a sinistra)? Perché il valore absolute ha il potere di togliere l'elemento dal normale flusso dei contenuti, a meno che non si crei un legame impostando in modo relative uno qualsiasi dei genitori che fa parte dell'insieme compreso nell'elemento con overflow:hidden... più facile a farsi che a dirsi.

      L'unica soluzione (forse) è quindi quella di impostare overflow:visible sul menu in modo da non tagliare ciò che sta fuori dai suoi confini.
      ...
    • Per ul.menu_bar elimina overflow:hidden. Basta solo questo; non serve definire questa proprietà come visible, perché questo è il valore di default.

      Bene, ma che succede ora? Il background della barra menu sembra scomparso!
      Questo è un effetto dovuto al float applicato sugli elementi figli. Il float (proprio come position:absolute) toglie gli elementi dal normale flusso dei contenuti e, in sostanza, fa collassare il contenitore perché al suo interno non viene più considerato nessun "ingombro" per gli elementi flottanti.

      Probabilmente questo era il motivo che ha portato ad impostare il menu come overflow:hidden. Infatti questa è una delle varie tecniche (anche definite sotto il nome di "clearfix") per evitare il collasso del contenitore dovuto agli elementi flottanti.

      In questo caso ci servirà quindi trovare una tecnica alternativa che permetta di mantenere il nostro overflow:visible.
      ...
    • Applica il seguente clearfix per ul.menu_bar
      codice:
      ul.menu_bar {
         display: inline-block;
         width: 100%;
      Questa è una delle varie tecniche (forse quella più ottimale in questo caso) ma potrebbero essercene altre che funzionano ugualmente; se c'è bisogno o se sei interessato, puoi fare qualche ricerca riguardo "clearfix". Qui mi limito a suggerirti questa.

      Ok, bene, pare che ci siamo... ah no, aspetta! Ora è comparsa una barra di scorrimento orizzontale che sposta l'intera area di qualche px, come mai?
      Questo succede perché con width:100% ora questo elemento è forzato ad avere una larghezza al 100% di quella del suo contenitore; normalmente per la proprietà width (in questo caso, quella del contenitore) non sono considerati eventuali ingombri dovuti al padding e al border, che quindi vanno ad aggiungersi al valore 100%. Nel tuo caso il contenitore ha un bordo di 1px che crea questo problema.

      Una semplice soluzione consiste nell'impostare la proprietà box-sizing.
      ...
    • Oltre alle precedenti due proprietà, imposta box-sizing:border-box.
      Avrai quindi questo:
      codice:
      ul.menu_bar {
         display: inline-block;
         width: 100%;
         box-sizing: border-box;
      Il gioco è fatto.



    Vedi un po' se il tutto funziona; ovviamente io ho già testato ma potrebbe essermi sfuggito qualcosa.
    Buon proseguimento
    Ultima modifica di KillerWorm; 16-01-2018 a 22:50 Motivo: minime correzioni nella descrizione
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    La prossima volta sarò più chiaro ed esaustivo nei titoli!

    Grazie davvero per il codice e per la brillante spiegazione, funziona tutto come volevo!!!

    Grazie ancora!!!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.