Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2020
    Messaggi
    5

    Menù orizzontale multilivello - problemi con selettori per abilitare il terzo livello

    Buongiorno,

    purtroppo non riesco a far funzionare :hover per attivare il terzo livello di menù.
    chiedo un aiuto per comprendere dove sto sbagliando.
    Grazie

    Di seguito trovate il codice:

    codice HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    
    <style TYPE="text/css" MEDIA="only screen and (min-width: 850px)"> 
    
    
    .menu li
    {
        list-style: none;
        width: 200px; 
        float: left;
        font-family: Oswald, sans-serif;
    }
    .menu li a
    {
        background-color: #9A9A9C;
        padding:  4px 15px;
        text-decoration: none;
        color: green;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }
    
    
    .menu li a:hover
    {
        background-color: #9A9A9C;
        color: white;
    }
    
    
    .menu li:hover a.smenu 
    {
        display: block;
        padding:  4px 15px;
        width: 150px;
    }
    
    
    li ul li:first-child
    {
        margin-top: 10px;
    }
    
    
    .smenu 
    { 
        display: none;
        border: solid 1px #b4b4b4;
        -webkit-border-radius: 10px; 
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    }
    
    
    .smenu2 
    { 
        display: none;
        border: solid 1px #b4b4b4;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    }
    
    
    .smenu ul
    {
        display: none;    
    }    
    .smenu:hover .smenu2
    {
        display: block;
        background-color: #9A9A9C;
        color: black;
        padding:  4px 15px;
        width: 150px;
    }
    
    
    </style>
    </head> 
    <body>
    <div class="menu">
    <ul>
        <li><a href="#">Menu 1</a>
            <ul>
                <li><a class="smenu" href="#">Anagrafica xxxxx</a>
                    <ul>
                        <li><a class="smenu2" href="#">Livello 3</a></li>
                        <li><a class="smenu2" href="#">Livello 3</a></li>
                        <li><a class="smenu2" href="#">Livello 3</a></li>
                    </ul>
                </li>    
                <li><a class="smenu" href="#">Livello 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li><a class="smenu" href="#">Livello 2</a></li>
                <li><a class="smenu" href="#">Livello 2</a>
                    <ul>
                        <li><a class="smenu2" href="#">Livello 3</a></li>
                        <li><a class="smenu2" href="#">Livello 3</a></li>
                        <li><a class="smenu2" href="#">Livello 3</a></li>
                    </ul>
                </li>
                <li><a class="smenu" href="#">Livello 2</a></li>
            </ul>
        </li>
    </ul>
    </div>
    </body>
    </html>
    Ultima modifica di KillerWorm; 27-03-2020 a 19:34 Motivo: aggiunto tag code HTML

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,715
    Buonasera e benvenuto su questo forum, prima di mettere mano al tuo codice ti propongo l'utilizzo di una soluzione già messa a punto da me, per una richiesta simile.
    Qui il Pen di esempio: Simple Horizontal DropDown CSS Menu

    Puoi ovviamente personalizzare il CSS secondo le tue esigenze.

    Fai sapere se può andare bene quello o se preferisci mantenere ciò che hai già elaborato, in tal caso gli do uno sguardo.

    Ovviamente altri utenti potrebbero intervenire per fornire eventuali altre risposte.



    [MOD]
    Occhio a quando posti del codice nel forum, dovresti usare gli appositi tag di formattazione (vedi regolamento di sezione). Per il momento ho corretto io, fai attenzione in futuro. Grazie per l'attenzione
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    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
    Utente di HTML.it
    Registrato dal
    Mar 2020
    Messaggi
    5
    Ringrazio per la risposta e per il codice consigliato di cui farò sicuramente tesoro, ma in questo momento mi interesserebbe capire dove sbaglio. Usare il codice di altri non è sempre la strada giusta per imparare. Comunque del codice css precedentemente indicato la parte che non mi funziona è la seguente
    codice:
    .smenu:hover .smenu2
    {
        display: block;
        background-color: #9A9A9C;
        color: black;
        padding:  4px 15px;
        width: 150px;
    }
    Ringrazio ancora per l'aiuto.

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,715
    Bene, allora ti indico dove sta l'errore. E' un po lungo da spiegare perché nel tuo elaborato si possono individuare diversi punti in cui si presenta una cattiva progettazione.

    1) Per "nascondere" i menu di livello 2 usi questa regola:
    codice:
    .smenu 
    { 
        display: none;
    dove la classe smenu è applicata agli elementi <a> che stanno dentro gli elementi <li> (di livello 2) che, a loro volta, stanno dentro i relativi <ul> (di livello 2).

    Tieni a mente questo: di fatto non stai "nascondendo" tali elementi <li> e <ul> ma solo il loro contenuto <a>.

    Per "aprire" questi menu di livello 2, utilizzi:
    codice:
    .menu li:hover a.smenu 
    {
        display: block;
    che sostanzialmente rende visibile l'elemento <a> quando si passa su un elemento <li> a lui ascendente (cioè un qualsiasi <li> che gli sta sopra gerarchicamente parlando).

    Qui c'è già un "piccolo" problema: non avendo "nascosto" gli elementi <li> (o meglio, quelli <ul>) di livello 2, ma solo l'elemento <a> contenuto in questi, stai permettendo che restino sensibili alle azioni del mouse (in particolare all'hover) anche quando il menu di questo stesso livello è chiuso.

    Infatti, anche se il loro contenuto <a> non occupa spazio, questi stessi elementi possono comunque occupare un certo ingombro, proprio come accade nel tuo elaborato. Di fatto ci sono gli elementi <li> di livello 3 che hanno dei margini e che influiscono sull'ingombro di questi <li> di livello 2.

    Il "piccolo" problema, in questo caso, sta nel fatto che il menu di livello 2 si apre anche quando non si passa esattamente sulla voce del menu di livello 1, cioè semplicemente avvicinandosi da sotto, non appena avviene l'hover su questi elementi <li> "mezzo nascosti" di livello 2.

    2) Per "nascondere" i menu di livello 3 usi questa regola:
    codice:
    .smenu2 
    { 
        display: none;
    dove tale classe è applicata agli elementi <a> di livello 3, con lo stesso criterio sbagliato usato per il livello 2.

    Per "aprire" questi menu di livello 3, utilizzi:
    codice:
    .smenu:hover .smenu2
    {
        display: block;
    dove stai letteralmente dicendo "quando sono sopra .smenu, cioè un qualsiasi elemento <a> di livello 2, allora apri gli elementi discendenti di questo, che abbiano la classe .smenu2"

    ... e qui l'errore: gli elementi <a> non hanno alcun discendente nella tua struttura HTML. La classe .smenu2 infatti non l'hai applicata ad elementi discendenti di quegli <a> ma, tuttalpiù, a elementi discendenti del fratello <ul> di <a>

    Lo stesso errore lo hai fatto in questa regola:
    codice:
    .smenu ul
    {
        display: none;    
    }
    dove suppongo avessi l'intenzione di nascondere gli elementi <ul> di livello 3 (il che sarebbe anche giusto, tornando al discorso del piccolo problema iniziale) ma, come ho appena spiegato, anche in questo caso tali elementi <ul> non sono discendenti di .smenu.

    La cosa più logica sarebbe quella di determinare l'hover negli elementi <li>, come hai fatto per il livello 1, piuttosto che negli elementi <a>, quindi applicare il display per gli <ul> discendenti/figli.

    Per il momento è tutto, fai sapere se riesci a capire come sistemare.
    Buon proseguimento
    Ultima modifica di KillerWorm; 28-03-2020 a 09:40
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    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!

  5. #5
    Utente di HTML.it
    Registrato dal
    Mar 2020
    Messaggi
    5
    Buongiorno,

    desidero ringraziarla per i suggerimenti.
    Certo non è bello sentirsi dire "..... si possono individuare diversi punti in cui si presenta una cattiva progettazione ", considerando le ore che ho perso anche solo per scrivere quello che ho scritto, ma non mi perdo d'animo e ringrazio sempre chi mi aiuta.

    Bisogna anche ammettere che l'uso corretto dei CSS non è per niente una cosa facile o scontata.
    Una delle difficoltà, a mio avviso, è quella che per fare cose simili o uguali si possono usare decine e decine di modi diversi. Ad esempio se lei guarda su internet tutti quelli che espongono degli esempi di Menù orizzontali ad almeno tre livelli potrà notare che non esiste uno uguale ad un altro e la fantasia e la contorsione regna sovrana.

    Tutto questo non fa che confondere chi sta cercando di imparare ad usare correttamente un linguaggio nuovo.

    Detto questo ho cercato di fare quello che lei mi ha detto, ammesso che abbia capito (di seguito il codice).

    Quello che adesso non funzione è che se scorro il menu verticalmente con il mouse tutto funziona, ma quando arrivo all'ultimo "Livello 2" mi sparisce il menù e non riesco a cliccare la voce.
    Infine se ci si posiziona tra menù 1 e menù 2 la zona rimane sensibile al :hover, questo perchè il sistema assume che non è un bottone l'area sensibile ma tutta un'area dettata dalla presenza di witdth: 200px su .menu li.

    Non sono riuscito a risolvere questi problemi.

    Come ultima cosa le chiedo, per non continuare a disturbare, se esiste una forma di assistenza a pagamento dove si può essere assistiti con questa modalità o altro simile.

    Ringrazio ancora e rimango in attesa di un cortese riscontro.



    codice HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    
    <style TYPE="text/css" MEDIA="only screen and (min-width: 850px)"> 
    
    
    .menu li
    {
        list-style: none;
        width: 200px; 
        float: left;
        font-family: Oswald, sans-serif;
    }
    .menu li a
    {
        background-color: #9A9A9C;
        padding:  4px 15px;
        text-decoration: none;
        color: green;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }
    
    
    .menu li a:hover
    {
        background-color: #9A9A9C;
        color: white;
    }
    
    
    .menu li:hover .smenu 
    {
        display: block;
    /*    padding:  4px 15px; */
    /*    width: 150px; */
    }
    
    
    li ul li:nth-child(odd)
    {
        margin-top: 10px; 
    }
    
    
    li ul li:nth-child(even)
    {
        margin-top: 10px; 
    }
    
    
    .smenu 
    { 
        display: none;
        padding:  4px 0px;
        border: 0!important;
        width: 150px!important;
        background-color: #9A9A9C;
        border: solid 1px #b4b4b4;
        -webkit-border-radius: 10px; 
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    }
    
    
    .smenu2 
    { 
        display: none;
        padding:  4px 0px!important;
        border: 0!important;
        width: 150px!important; 
        border: solid 1px #b4b4b4;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    
    
    }
    
    
    .smenu ul
    {
        display: none;    
    }    
    .smenu:hover .smenu2
    {
        display: block;
        background-color: #9A9A9C;
        color: black;
        padding:  4px 15px;
        width: 150px;
    }
    
    
    
    
    </style>
    </head> 
    <body>
    <div class="menu">
    <ul>
        <li><a href="#">Menu 1</a>
            <ul>
                <li class="smenu"><a href="#">Anagrafica xxxxx</a>
                    <ul class="smenu2" >
                        <li><a href="#">Livello 3</a></li>
                        <li><a href="#">Livello 3</a></li>
                        <li><a href="#">Livello 3</a></li>
                    </ul>
                </li>    
                <li class="smenu"><a href="#">Livello 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li class="smenu"><a href="#">Livello 2</a></li>
                <li class="smenu"><a href="#">Livello 2</a>
                    <ul class="smenu2">
                        <li><a href="#">Livello 3</a></li>
                        <li><a href="#">Livello 3</a></li>
                        <li><a href="#">Livello 3</a></li>
                    </ul>
                </li>
                <li class="smenu"><a href="#">Livello 2</a></li>
            </ul>
        </li>
    </ul>
    </div>
    </body>
    </html>
    Ultima modifica di KillerWorm; 29-03-2020 a 20:50 Motivo: corretto tag code

  6. #6
    Se hai problemi ci sono anche vari software che producono menu perfetti in puro css
    Ultima modifica di carlomarangoni; 29-03-2020 a 11:14
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  7. #7
    Utente di HTML.it
    Registrato dal
    Mar 2020
    Messaggi
    5
    Buongiorno,
    mi aspettavo una risposta da KillerWorm, solo perchè avevo iniziato con lui un breve percorso per comprendere i miei errori sul Menù che stavo cercando di creare.
    Comunque dalla sua risposta è evidente che lei non ha letto le domande e le risposte predenti, soprattutto l'ultima a cui mi ha risposto. Sono stato io il primo a sottolineare che su internet ne trovo decine e decine di cose già pronte, ma spesso sono da prendere così come sono e visto che sono strutturati in maniera complessa, ad esempio con transizioni o altro che io non voglio usare. Tenga presente che poi se un domani uno volesse fare una modifica e non ha compreso come è fatto il menù copiato si troverebbe in una situazione di difficoltà estrema nel cercare di apportare anche la più banale modifica.
    Quindi credo che il suo consiglio sia fuori tema rispetto alle mie esigenze ed all'ultimo problema che avevo esposto.
    Se possibile gradirei un aiuto in merito a quanto scritto in precedenza.
    Ringrazio anticipatamente per qualsiasi aiuto possiate offrirmi.

  8. #8
    A parte che qui si dovrebbe discutere senza fare polemiche sterili e senza aver capito il suggerimento, io non ho suggerito un costrutto già pronto e solo da adattare alle proprie esigenze, ma un software che costruisce il menu da zero docendogli solo quello che uno vuole ottenere e mi sembra la soluzione a lei adatta cosiderato la competenza

    Lascio al moderatore di sezione la valutazione
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,715
    Salve
    Quote Originariamente inviata da Orfeo63
    mi aspettavo una risposta da KillerWorm, solo perchè avevo iniziato con lui un breve percorso per comprendere i miei errori sul Menù che stavo cercando di creare.
    Ho potuto rispondere solo ora.

    [MOD]

    Ci tengo comunque a precisare che questo è un forum pubblico; chiunque è libero di intervenire col proprio contributo a qualsiasi discussione qui aperta, e lo si fa sempre senza alcun obbligo. Ben vengano gli interventi di ulteriori utenti (nei limiti del pertinente), anche se solo per consigliare altre diverse possibili soluzioni.

    [/MOD]


    Cerco di seguire un certo ordine per chiarire i vari punti emersi.

    Quote Originariamente inviata da Orfeo63
    desidero ringraziarla per i suggerimenti
    Prego, è comunque sempre un piacere poter offrire il proprio aiuto/sapere per cercare di soddisfare le esigenze del prossimo.

    ---

    Nota a margine:
    In queste sezioni (tecniche) del forum si utilizza generalmente un tipo di comunicazione informale. Per tale motivo è consueto, e ritengo sia preferibile (chiaramente non obbligatorio), darsi reciprocamente del "tu", a prescindere dall'età e dalle possibili differenti posizioni degli interlocutori.

    Anche se, dal numero nel tuo nick, posso supporre di avere quasi una ventina d'anni meno dei tuoi, personalmente uso e continuerò ad usare il "tu" ed invito quindi anche te a darmi del "tu"

    ---
    Quote Originariamente inviata da carlomarangoni
    Se hai problemi ci sono anche vari software che producono menu perfetti in puro css
    Quote Originariamente inviata da Orfeo63
    Comunque dalla sua risposta è evidente che lei non ha letto le domande e le risposte predenti
    [...]
    Quindi credo che il suo consiglio sia fuori tema rispetto alle mie esigenze ed all'ultimo problema che avevo esposto.
    [MOD]

    Ritengo che l'intervento di carlomarangoni, in questo caso, sia da considerarsi comunque in tema con l'argomento.
    Lo si può prendere giusto come un consiglio per una possibile soluzione alternativa. Se poi questo non è utile al nostro scopo, possiamo sempre ringraziare per il consiglio e proseguire col nostro percorso.

    [/MOD]


    Quote Originariamente inviata da Orfeo63
    Tenga presente che poi se un domani uno volesse fare una modifica e non ha compreso come è fatto il menù copiato si troverebbe in una situazione di difficoltà estrema nel cercare di apportare anche la più banale modifica.
    Condivido ma penso comunque possa essere valido e attuabile anche il procedimento contrario, nel senso di poter utilizzare un elaborato già pronto (e presumibilmente già funzionante ed ottimizzato allo scopo) e studiarlo (magari provando ad applicare personalizzazioni) per capire quali particolari tecniche/accorgimenti sono stati utilizzati.

    Molto sinteticamente, andando per analogie:
    - il tuo metodo è "imparo dai miei errori"
    - il metodo alternativo ("inverso") è "studio da modelli di riferimento per imparare"

    Entrambi i procedimenti, in maniera differente, potrebbero portarci alla conoscenza di quelle nozioni che ci siamo prefissi di apprendere.

    Il tuo metodo non ti permette comunque di avere un risultato già utilizzabile se non attraverso il necessario procedimento di comprensione degli errori e studio di possibili soluzioni, a differenza invece del metodo "inverso" per il quale hai già il risultato funzionante ed utilizzabile che puoi eventualmente analizzare e studiare per comprendere come poterlo eventualmente anche riprodurre da zero, dal momento che hai acquisito le conoscenze opportune.

    La tua richiesta iniziale (quantomeno il primo post) non specificava il tuo intento di "studiare" il CSS, come poi hai aggiunto in seguito, ma poteva lasciare intendere che ti servisse ottenere una soluzione funzionante in breve tempo (sebbene anche questo non era specificato).

    Per tale motivo il mio intervento iniziale e, presumo, quello di carlomarangoni (a prescindere dal proseguo della discussione), è stato quello di proporti l'uso di soluzioni già pronte o strumenti per ottenerle, con cui è possibile apportare, in entrambi i casi, le volute personalizzazioni.

    Ad ogni modo, anche se ora è chiaro il tuo intento di applicazione allo studio piuttosto che della ricerca di una soluzione pronta all'uso, resta comunque valido il consiglio di utilizzare il metodo proposto, diciamo così, "inverso", proprio per i motivi appena menzionati.

    Quote Originariamente inviata da Orfeo63
    Se possibile gradirei un aiuto in merito a quanto scritto in precedenza.
    Ringrazio anticipatamente per qualsiasi aiuto possiate offrirmi.
    Certamente, proseguo comunque col cercare di chiarire gli altri punti da te esposti.

    Certo non è bello sentirsi dire "..... si possono individuare diversi punti in cui si presenta una cattiva progettazione ", considerando le ore che ho perso anche solo per scrivere quello che ho scritto, ma non mi perdo d'animo e ringrazio sempre chi mi aiuta.
    Perdona la mia franchezza, posso assicurarti che non l'ho scritto con l'intento di sminuire il tuo operato. In linea di massima il codice, non presenta particolari errori sintattici o di impostazione del CSS, ma piuttosto ci sono problemi legati proprio all'architettura del codice, i quali influiscono sulle funzionalità.

    Ammetto comunque che il tono di quella mia "constatazione" è provocatorio, nel senso che avendo tu deciso di proseguire col tuo metodo, ho voluto farti notare fin da subito che ci sono questi particolari problemi, relativi proprio alla progettazione piuttosto che ad un qualche "semplice" problema nei selettori CSS. Anche proprio per questo motivo ho indicato, piuttosto, di utilizzare una soluzione già ottimizzata, in cui ho personalmente valutato, studiato e risolto quelle problematiche di architettura, funzionalità, usabilità, gestione, ecc. relative proprio alla progettazione del codice.

    Quote Originariamente inviata da Orfeo63
    Bisogna anche ammettere che l'uso corretto dei CSS non è per niente una cosa facile o scontata.
    Non dirlo a me
    Non solo, posso aggiungere che questa tecnologia, come tutte le altre nell'ambito informatico, è comunque in continua evoluzione, per cui se è difficile imparare per ottenere una buona padronanza nell'uso del codice in sé, è maggiormente difficile stare dietro a tutte quelle nuove "direttive" che nascono e si aggiornano di continuo.

    Certo, è chiaro che avendo delle buone basi sarà più semplice anche adeguarsi alle fasi evolutive.

    Quote Originariamente inviata da Orfeo63
    Una delle difficoltà, a mio avviso, è quella che per fare cose simili o uguali si possono usare decine e decine di modi diversi. Ad esempio se lei guarda su internet tutti quelli che espongono degli esempi di Menù orizzontali ad almeno tre livelli potrà notare che non esiste uno uguale ad un altro e la fantasia e la contorsione regna sovrana.
    Lo so bene. Una delle frasi con cui spesso esordisco nelle risposte a discussioni simili a questa è "si può fare in vari modi".

    A mio parere, questo non va comunque visto come un male, anzi è bene che ognuno sia "libero" di costruire il suo elaborato come meglio crede, secondo le sue specifiche esigenze e usando quelle tecniche che crede sia meglio usare. In questo non si possono porre dei limiti, sebbene possano esserci delle linee guida e delle convenzioni che è preferibile tenere in considerazione per poter raggiungere un buon risultato.

    Quote Originariamente inviata da Orfeo63
    Tutto questo non fa che confondere chi sta cercando di imparare ad usare correttamente un linguaggio nuovo.
    Vedila così: considera l'analogia col linguaggio come forma di comunicazione verbale. La correttezza di utilizzo del linguaggio non è compromessa dal fatto che si possano sviluppare differenti "frasi" e da come queste possano essere elaborate in svariati modi per ottenere uno stesso "significato", ma è stabilita dal fatto di adoperare le giuste regole sintattiche, ortografiche, grammaticali, fonetiche, semantiche, ecc. che servono per costruire e utilizzare opportunamente le frasi.

    Le diverse soluzioni non devono creare confusione per lo studio, perché a monte dovrebbe esserci già la conoscenza di quelle nozioni utili alla costruzione stessa delle diverse soluzioni. La difficoltà, a quel punto, sta solo nel capire come e perché è stata usata una tecnica rispetto ad un'altra.

    L'uso corretto del linguaggio prescinde quindi dalla difficoltà/confusione che stai incontrando nell'esaminare diverse soluzioni. In altre parole, ti mancano delle nozioni di base, ad esempio per una corretta costruzione dei selettori CSS (vedi le spiegazioni nel mio precedente post) e riguardo la logica di funzionamento di quei particolari meccanismi che ora cerchiamo di definire meglio.

    ---

    Un ultimo consiglio prima di proseguire: una buona pratica in programmazione è quella di commentare sempre il codice (quantomeno quello sorgente, elaborato in fase di sviluppo), così da rendere semplice lo sviluppo stesso e la manutenzione da parte tua o di terzi che vogliano/debbano metterci mano.

    In questo caso dei semplici commenti per i vari selettori possono sicuramente aiutare te, nonché gli altri a cui chiedi aiuto, a comprendere più facilmente cosa è stato fatto e come dovrebbe funzionare. Ad esempio potresti indicare, per ogni selettore/regola, l'elemento selezionato e l'eventuale azione/stato definito da tale regola. Vedi il mio esempio dove appunto ho applicato dei semplici commenti, per ogni regola, che permettono di individuare facilmente dove poter applicare le modifiche, ad esempio, per personalizzare i vari elementi.

    CONTINUA SOTTO ....
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    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!

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,715
    Quote Originariamente inviata da Orfeo63
    Detto questo ho cercato di fare quello che lei mi ha detto, ammesso che abbia capito (di seguito il codice).
    Sì, hai applicato ciò che ho indicato ma solo in parte, cioè solo per i sottomenu di livello 3, non per quelli di livello 2:
    Quote Originariamente inviata da KillerWorm
    La cosa più logica sarebbe quella di determinare l'hover negli elementi <li>, come hai fatto per il livello 1, piuttosto che negli elementi <a>, quindi applicare il display per gli <ul> discendenti/figli.
    Tu hai spostato la classe smenu2 dall'elemento <a> di livello 3 al relativo <ul> dello stesso livello. Questo può risultare corretto e di fatto hai ottenuto il risultato voluto.

    Per il livello 2 però ti sei limitato a spostare la classe smenu dall'elemento <a> al suo involucro <li> mentre anche qui avresti dovuto spostarlo sul relativo <ul>, adeguando opportunamente anche il CSS, così che l'intero <ul> (e non solo i suoi contenuti) risulti "nascosto" quando il sottomenu è chiuso.

    Anche se nella situazione attuale questo non crea problemi "apprezzabili", potrebbe però dare noia se ad esempio si decidesse di impostare delle proprietà graficamente visibili, per motivi estetici, a quegli stessi elementi <ul>.

    In questo caso sarebbero comunque da prendere in considerazione altre proprietà che attualmente hai applicato agli elementi <li>, come il float che chiaramente fa collassare l'elemento <ul>... ma questo è un altro discorso.

    Ad ogni modo, per una migliore impostazione di sviluppo, l'idea di base è quella di considerare l'intero involucro <ul> (dei singoli sottomenu) come un oggetto che va "nascosto" o "visualizzato" per intero, NON nascondere/visualizzare soltanto i suoi contenuti.

    Questo punto sarebbe quindi da valutare meglio.

    Quello che adesso non funzione è che se scorro il menu verticalmente con il mouse tutto funziona, ma quando arrivo all'ultimo "Livello 2" mi sparisce il menù e non riesco a cliccare la voce.
    Qui c'è un problema di fondo dato dal fatto che hai deciso di "estendere", i menu di livello 3, all'interno della relativa "voce" del menu di livello 2.

    Cerco di spiegare:

    Partiamo dal fatto che i vari livelli si aprono quando avviene l'hover sulle relative voci e, viceversa, si chiudono quando non c'è hover.

    Cosa avviene quindi?

    Nel momento in cui tu passi sulla voce del livello 2, si apre il livello 3. Le voci di livello 3 però le stai "inserendo" tra una voce e l'altra del livello 2, ad esempio tra la penultima e l'ultima voce.

    Quando si apre il livello 3, l'ultima voce di livello 2 si sposta verso il basso per far "stare" il livello 3 appena aperto sopra di lei.

    Bene, ora quelle voci di livello 3 sono visibili e non si chiudono fintanto che si sta sopra queste o sopra la relativa voce di livello 2.

    Cosa accade però quando cerchi di passare all'ultima voce di livello 2?

    Per prima cosa stai portando il puntatore fuori da quelle voci di livello 3 che chiaramente si chiudono, come è corretto che sia.

    Chiudendosi però portano indietro, nella sua posizione originale, anche quell'ultima voce di livello 2, precludendo di fatto l'azione dell'hover su di essa perché, in quell'istante, quell'elemento non si trova più sotto il puntatore.

    Chiaramente il problema "si può risolvere in vari modi"

    La cosa più pratica e logica sarebbe l'uso del metodo convenzionale, cioè quello adoperato nella maggior parte dei siti web che adoperano menu a discesa, ma che si rifà al classico menu di qualsiasi software. I sottomenu dei livelli oltre il 2 si aprono lateralmente, lasciando quindi inalterate e accessibili le voci del livello soprastante.

    Una tecnica alternativa, che forse si avvicina all'impostazione da te usata, è detta "accordion menu", cioè "menu a fisarmonica", dove però è previsto che si esegua un click per aprire/chiudere i livelli, non un hover. L'azione del click in genere è gestita via JavaScript, anche se possono usare degli hack per risolvere in puro CSS.

    Puoi vedere qualche esempio su CodePen: https://codepen.io/search/pens?q=accordion+menu

    In questo caso dovrai comunque valutare tu quale effetto vorresti ottenere.

    Quote Originariamente inviata da Orfeo63
    se ci si posiziona tra menù 1 e menù 2 la zona rimane sensibile al :hover, questo perchè il sistema assume che non è un bottone l'area sensibile ma tutta un'area dettata dalla presenza di witdth: 200px su .menu li.
    Sì, chiaramente è così dal momento che hai impostato una dimensione fissa per tali elementi e gli stai applicando l'hover per aprire i sottomenu.

    Anche in questo caso dovrai dirci tu quale effetto vorresti ottenere.

    Se vuoi mantenere la distanza tra una voce e l'altra, puoi lasciare la proprietà width come auto (valore di default), quindi applicare un margin. In questo modo lo spazio tra una voce e l'altra non sarà sensibile.

    ---

    Aggiungo un altro punto che ti propongo di prendere in considerazione.

    Il criterio di utilizzo di diverse classi per indicare i vari livelli (come hai fatto tu), a mio parere è superfluo se non addirittura limitativo:

    - è superfluo perché si possono usare in modo più generico i selettori di tipo, così da "semplificare" la stesura del CSS e ottenere un markup HTML più pulito.

    - è limitativo perché non ti permette di estendere la struttura oltre quei 3 livelli. Volendo magari inserire, un domani, un livello 4, dovrai necessariamente rimettere mano al CSS per definire anche quella classe "smenu3" che attualmente non hai previsto. Chiaramente per qualsiasi ulteriore livello si presenterà lo stesso problema.

    Il mio suggerimento in questo caso è quello di usare un'unica classe (il tuo ".menu") che identifica il contenitore principale. Sarà comunque possibile selezionare in modo specifico ciascun elemento e livello dentro questa struttura, usando opportunamente i selettori di tipo.

    Anche in questo caso ti invito, inutile dirlo, a vedere come ho impostato il mio esempio.

    ---

    Come ultima cosa le chiedo, per non continuare a disturbare, se esiste una forma di assistenza a pagamento dove si può essere assistiti con questa modalità o altro simile.
    Finora non hai creato alcun disturbo rilevante e mi spiace che tu lo pensi o che tu sia arrivato a tale opinione magari per qualche frase detta da me o da altri utenti.

    Questo forum esiste per poter chiedere/dare supporto e discutere su argomenti inerenti il web:

    Cito la prima frase del regolamento generale:
    Il forum di HTML.it è un punto di incontro e confronto democratico su temi legati al Web publishing. Lo scopo del forum è di creare una comunità di utenti disposti alla discussione.
    Chiaramente chi risponde alle discussioni lo fa nei limiti delle proprie possibilità e senza alcun obbligo di sorta.

    Se quello che cerchi è un tutor che ti segua nello sviluppo/studio del codice che stai cercando di sviluppare, questo non è il luogo adatto.
    Non ho idea se esistano, ed eventualmente dove/come trovarli, servizi che offrano giusto questo particolare tipo di assistenza.
    Più in generale si potrebbe pensare ad un corso di programmazione HTML/CSS magari di un livello adatto alle tue conoscenze, ma anche in questo caso personalmente non saprei che consigliare.

    Posso giusto indicarti la sezione Offro lavoro/collaborazione dove puoi proporre, in una delle 2 sottosezioni, la tua richiesta specificando opportunamente tutti i dettagli come da regolamento di quella sezione (che andrà adeguatamente letto prima di aprire discussioni).

    A parte questo, ti invito comunque a proseguire qui, per sviluppare l'oggetto in discussione, e, ripeto, non c'è alcun disturbo fintanto che si continui ad utilizzare un toni pacifico; anzi, personalmente avrò piacere nel continuare a partecipare se posso essere d'aiuto, sempre nei limiti del possibile e sempre senza impegno.

    Perdona l'estrema lungaggine ma mi pareva corretto esaminare nel dettaglio i vari punti.

    Per ora è tutto, buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    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!

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 © 2020 vBulletin Solutions, Inc. All rights reserved.