Visualizzazione risultati 1 fino 11 di 11

Discussione: Div di un menu che si allarga/restringe al click

  1. #1
    personalthings non è connesso Utente giovane
    Data registrazione
    10-08-2013
    Messaggi
    73

    Predefinito Div di un menu che si allarga/restringe al click

    Ciao ragazzi,
    posto un'immagine esemplificativa qualora non riuscissi a spiegarmi meglio.

    Sapete per caso come si chiama l'effetto di un div che, al click, si allarga verticalmente per far spazio a un menu a tendina, spostando eventuali altri tasti "più giù" (per poi risalire quando il menu si chiude)?

    Lo sto cercando ovunque su internet, ma non trovo nulla. Sicuramente mi manca il linguaggio tecnico.

    IMMAGINE ESEMPLIFICATIVA

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,064

  3. #3
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,252

    Predefinito

    Puoi ottenere l'effetto con i tag <details> e <summary>.

    Vedi: https://developer.mozilla.org/en-US/...lement/details

  4. #4
    personalthings non è connesso Utente giovane
    Data registrazione
    10-08-2013
    Messaggi
    73

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    E' esattamente quello che cercavo.
    Ho provato a fare una strutturazione molto basic con le necessità di cui ho bisogno, e sebbene io sia riuscito a creare tutto quello che mi serviva, ho solo un problema strutturale.
    Facendo click sulle diverse immagini (che per questione di design ho dovuto adattare con un div position), il menu non si incastra con le immagini link, e non capisco dove sia l'errore.

    Il risultato è qui, insieme al codice sorgente messo tutto nella stessa pagina.

    Risutato semi-riuscito

    Se poteste dirmi dove sbaglio vi sarei debitore

  5. #5
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,064

    Predefinito

    Quando devi fare qualsiasi cosa in javascript (ma anche in CSS), aiutati con gli strumenti per sviluppatore presenti sul browser (di solito si aprono con F12 ma dipende dal browser).

    Nel tuo caso, premendo appunto F12 -> console, noterai che il file js non viene incluso perché non viene trovato. Manca quindi quel file (o non è rinominato correttamente).

    Ciao!

  6. #6
    personalthings non è connesso Utente giovane
    Data registrazione
    10-08-2013
    Messaggi
    73

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    Quando devi fare qualsiasi cosa in javascript (ma anche in CSS), aiutati con gli strumenti per sviluppatore presenti sul browser (di solito si aprono con F12 ma dipende dal browser).

    Nel tuo caso, premendo appunto F12 -> console, noterai che il file js non viene incluso perché non viene trovato. Manca quindi quel file (o non è rinominato correttamente).

    Ciao!
    Ciao, ti ringrazio della risposta.
    No, in realtà quel file non c'entrava nulla, e infatti l'ho rimosso.

    Il mio problema è strettamente legato al CSS, perché non riesco ad associare lo scroll down all'immagine. Lo scroll down, infatti, funziona per ogni tasto premuto, ma il sottomenu non è allineato, e non capisco dove sia il problema.

  7. #7
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,979

    Predefinito

    Salve,
    se non ho capito male ciò che le serve, questo esempio dovrebbe corrispondere al risultato che intende ottenere.

    Spero che le possa essere di aiuto.

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 29-08-2022 alle ore 22.53.58

  8. #8
    personalthings non è connesso Utente giovane
    Data registrazione
    10-08-2013
    Messaggi
    73

    Predefinito

    Citazione Originalmente inviato da GraphOGLRisorse Visualizza messaggio
    Salve,
    se non ho capito male ciò che le serve, questo esempio dovrebbe corrispondere al risultato che intende ottenere.

    Spero che le possa essere di aiuto.

    Cordiali saluti.
    Ti ringrazio tanto della risposta.
    Il realtà il mio problema è un altro.

    Sono riuscito a creare tutto senza problemi.
    Avendo però delle immagini collocate in uno specifico punto della pagina, ho usato dei div position.
    A seguito di questi div, non riesco ad allineare il sottomenu all'immagine.

    La pagina di ciò che intendo è qui: http://personalthings.altervista.org/prova_menu.html

  9. #9
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,064

    Predefinito

    Un mio consiglio è questo:

    Riparti dalla situazione originale, ovvero gli absolute.

    Poi inserisci le scritte in formato "testo" con sfondo l'immagine di sfondo. Quando l'utente passerà con il mouse sopra, puoi sostituire l'immagine di sfondo con :hover.

    In questo modo, caricherai solo due immagini e la pagina risulterà più leggera.

    Altrimenti, la soluzione più "corretta" sarebbe quando scritto da dreadnaut.

    Ciao!
    Ultima modifica di alemoppo : 29-08-2022 alle ore 23.56.19

  10. #10
    personalthings non è connesso Utente giovane
    Data registrazione
    10-08-2013
    Messaggi
    73

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    Un mio consiglio è questo:

    Riparti dalla situazione originale, ovvero gli absolute.

    Poi inserisci le scritte in formato "testo" con sfondo l'immagine di sfondo. Quando l'utente passerà con il mouse sopra, puoi sostituire l'immagine di sfondo con :hover.

    In questo modo, caricherai solo due immagini e la pagina risulterà più leggera.

    Altrimenti, la soluzione più "corretta" sarebbe quando scritto da dreadnaut.

    Ciao!
    Ti ringrazio della risposta.
    Tu dici quindi che non è una cosa che è possibile fare?

    Guarda, a me togliere l'effetto sull'immagine (pic/pic inner) e lasciare solo l'immagine cambia poco.
    La cosa che mi preme è dover posizionare le immagini in un determinato punto, perché è vero che saranno una sotto l'altro, ma per il tipo di esigenza che ho, i tasti devono essere fissati e posizionati in un punto specifico.

    Siccome credo che il problema sia proprio quel "position: absolute" sulle classe primi_passi, regolamento ecc... non è possibile mantenere quelle posizioni e adattare il menu?

  11. #11
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,979

    Predefinito

    Ho adattato il codice dell'esempio da me indicato in precedenza, in modo da ottenere lo stesso risltato finale della sua pagina di esempio ma funzionante.

    Per il posizionamento del menu, mi sono limitato ad includere tutta la struttura HTML del menu in un <div></div> a cui ho applicato una classe CSS che ho chiamato pos-menu.

    In questo modo, non ci sarà il problema di ogni elemento del menu che ha una propria posizione assoluta indipendente.

    Da qui può vedere il demo: EsempioMenuFisarmonica.html

    Da qui può scaricare il file compresso contente il demo.

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 31-08-2022 alle ore 15.41.15

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •