Supporto » Aspetto = Temi » Come aggiungere dei submenu a scomparsa (on hover) via css

  • Risolto sacconi

    (@sacconi)


    Se vado in personalizza>menu posso aggiungere rapidamente delle voci di submenu al mio Custom menu, però poi queste voci di submenu restano visibili e allineate ai tasti del menù principale, qualcuno sa che voce di css devo aggiungere ai css qui sotto? Io vorrei che i sub menu comparissero “on hover”, allineati sotto la voce di menù da cui dipendono

    #header-right-section ul {
        margin:20px 0px 20px 0px;
        list-style-type: none;
        list-style: none;
        list-style-image: none;
        text-align:right;
        display:inline-block;
    }
    #header-right-section li {
        padding: 0px 20px 0px 0px;
        display: inline-block;
    }
     
    #header-right-section a {
        color:#006288;
    }
    #header-right-section a:hover {
    	text-decoration:underline;
    }
    

    La pagina su cui ho bisogno di aiuto: [devi essere connesso per vedere il link]

Stai visualizzando 14 risposte - dal 1 al 14 (di 14 totali)
  • Ciao @sacconi ,

    Mi dispiace che nessuno sia riuscito a rispondere prima alla tua domanda, non so se hai ancora bisogno di un piccolo aiuto con il tuo CSS, nel caso questo penso potrebbe aiutarti:

    Per fare in modo che i submenu compaiano “on hover” allineati sotto la voce di menu da cui dipendono, puoi utilizzare la proprietà CSS “position” e “display”. In particolare, puoi impostare la posizione dei submenu come “absolute” rispetto alla voce di menu padre, utilizzando la proprietà “position: absolute” e indicando la posizione con “top” e “left”. Inoltre, devi impostare la proprietà “display” dei submenu su “none” inizialmente, e poi farli apparire quando si passa il mouse sulla voce di menu padre utilizzando il selettore CSS “li:hover ul” e impostando “display: block”.

    Ecco un esempio di codice CSS che puoi utilizzare:

    #header-right-section ul { 
    margin: 20px 0px 20px 0px;
    list-style-type: none;
    list-style: none; 
    list-style-image: none; 
    text-align: right; 
    display: inline-block; 
    }
    
    #header-right-section li { 
    padding: 0px 20px 0px 0px; 
    display: inline-block; 
    position: relative; /* posizione relativa per consentire posizione assoluta per submenu */ 
    }
    
    #header-right-section a { 
    color: #006288; 
    }
    
    #header-right-section a:hover { 
    text-decoration: underline; 
    }
    
    /* submenu / 
    #header-right-section ul ul { 
    position: absolute; 
    top: 100%; / posizionamento sotto la voce di menu padre/ display: none; / inizialmente nascosto */ 
    }
    
    #header-right-section li:hover ul { 
    display: block; /* mostra il submenu al passaggio del mouse sulla voce di menu padre */ 
    }

    Assicurati di adattare il selettore CSS alle classi o ID specifici utilizzati nel tuo HTML.

    Spero di esserti stato utile,

    Buona Giornata…

    Enzo 😉

    Chi ha creato la discussione sacconi

    (@sacconi)

    ciao, ti ringrazio, diciamo che col tuo codice ho fatto un passo in avanti, però resta un problema: quando passo sulla voce di menù padre appare sotto la voce di menù figlio ma quando sposto il cursore per cliccare sul figlio quest’ultimo scompare, come puoi vedere qui: https://sacconicase.com/ (ho messo una voce di sub-menù a Lignano Sabbiadoro)

    • Questa risposta è stata modificata 1 anno, 1 mese fa da sacconi.

    Ciao @sacconi ,

    prova con questo css:

    #header-right-section ul {
      margin: 20px 0px 20px 0px;
      list-style-type: none;
      list-style: none;
      list-style-image: none;
      text-align: right;
      display: inline-block;
    }
    
    #header-right-section li {
      padding: 0px 20px 0px 0px;
      display: inline-block;
      position: relative;
    }
    
    #header-right-section a {
      color: #006288;
    }
    
    #header-right-section a:hover {
      text-decoration: underline;
    }
    
    /* submenu */
    #header-right-section ul ul {
      position: absolute;
      top: 100%;
      display: none;
    }
    
    #header-right-section li:hover ul {
      display: block;
    }
    
    /* Aggiunta del selettore :hover sul menu padre e sul menu figlio */
    #header-right-section li:hover > ul,
    #header-right-section ul:hover {
      display: block;
    }
    
    #header-right-section ul li {
      position: relative;
    }
    
    #header-right-section ul ul ul {
      position: absolute;
      left: 100%;
      top:0;
    }
    
    #header-right-section ul li a {
      width: 200px;
      display: inline-block;
      text-align: left;
    }
    
    #header-right-section ul ul li a {
      width: 150px;
      display: inline-block;
      text-align: left;
    }
    
    

    Nel codice sopra, ho aggiunto il selettore :hover sulla voce di menu padre e sul submenu figlio, utilizzando i selettori > e :hover.

    Inoltre, ho anche aggiunto alcuni stili per impostare la larghezza delle voci di menu. Ovviamente ti consiglio di adattare il codice alla tua struttura HTML specifica.

    Spero di esserti stato utile

    Enzo

    Chi ha creato la discussione sacconi

    (@sacconi)

    Purtroppo questo non va. Non posso comunque allargare i pulsanti perchè deve restare tutto allineato col logo SacconiCase, ma anche a prescindere dalla larghezza dei tasti non mi resta fermo il “figlio” quando mi sposto dal “padre”…:(

    ciao @sacconi ,

    Il tema che utilizzi dovrebbe però darti la possibilità di modificare il menù a tuo piacere ( vai in aspetto, personalizza e li gestisci l’aspetto e le voci).

    Prova a reimpostare il menù da dove ti ho indicato e cancellando il css supplementare che hai aggiunto in precedenza.

    Fammi sapere se cosi risolvi

    Enzo

    Chi ha creato la discussione sacconi

    (@sacconi)

    purtroppo no, è come lo vedi ora: https://sacconicase.com/ , non resta nemmeno nascosto il submenu. Posso aggiungere che il menù nell’header è un “custom menù” creato da me, il mio tema non l’aveva, e poi l’ho messo in quella posizione tramite un widget….

    Capisco, allora questo CSS (che vedi sotto) non era male?

    Ma avevi il problema che non riuscivi a fissare il submenù … giusto?

    #header-right-section ul { 
    margin: 20px 0px 20px 0px;
    list-style-type: none;
    list-style: none; 
    list-style-image: none; 
    text-align: right; 
    display: inline-block; 
    }
    
    #header-right-section li { 
    padding: 0px 20px 0px 0px; 
    display: inline-block; 
    position: relative; /* posizione relativa per consentire posizione assoluta per submenu */ 
    }
    
    #header-right-section a { 
    color: #006288; 
    }
    
    #header-right-section a:hover { 
    text-decoration: underline; 
    }
    
    /* submenu / 
    #header-right-section ul ul { 
    position: absolute; 
    top: 100%; / posizionamento sotto la voce di menu padre/ display: none; / inizialmente nascosto */ 
    }
    
    #header-right-section li:hover ul { 
    display: block; /* mostra il submenu al passaggio del mouse sulla voce di menu padre */ 
    }
    Chi ha creato la discussione sacconi

    (@sacconi)

    Il primo codice che mi hai inviato era migliore perchè il menù intanto stava allineato col logo (un po’ più in alto di dove è ora), e poi il submenu era invisibile e diventava visibile “on hover”, quando il cursore passava sulla voce di menù padre. L’unico problema è che non facevo a tempo di spostare il cursore dal menù al submenù che questo spariva. Non si può mettere quelche “delay” se esiste, un ritardo per cui il submenu una volta attivato resta attivato almeno un secondino?

    /* submenu */
            #header-right-section ul ul {
                position: absolute;
                top: 100%;
                display: none;
                transition: all 0.3s ease-in-out;
                transition-delay: 3s;
            }

    Prova a sostituire la parte di codice che riguarda #header-right-selectionul ul con il codice che ti ho fornito qui sopra, ho inserito un transition-delay di 3secondi, se funziona e ritieni che sia troppo diminuisci il valore numerico

    fammi sapere 😉

    Enzo

    ovviamente devi sostituire questa sezione nel penultimo codice che ti ho inviato (quello che avevi detto che più o meno funzionava) 😉

    Chi ha creato la discussione sacconi

    (@sacconi)

    ciao. No, i comandi transition non vanno però ho risolto il problema per caso, ho messo top 20% anzichè 100% e funziona. Funziona fino a 30% poi da 40% in su non va. Non so su cosa ho agito. Tu hai una spiegazione razionale?

    mmmm…non saprei forse prende l’hover del menu padre…

    Cmq dai funziona 😉

    quindi risolto…era quello che volevi ottenere giusto?

    Chi ha creato la discussione sacconi

    (@sacconi)

    Sì, ti ringrazio! Ho ancora tante cose da risolvere ma aprirò altri argomenti, questo è a posto…

    Tranquillo,

    Apri altre domande e qualcuno ti aiuterà sicuramente (anche io nel mio piccolo).

    alla prossima,

    Enzo

    p.s.: non scordare di contrassegnare il post come risolto 😉

Stai visualizzando 14 risposte - dal 1 al 14 (di 14 totali)
  • Il topic ‘Come aggiungere dei submenu a scomparsa (on hover) via css’ è chiuso a nuove risposte.