Div di un menu che si allarga/restringe al click

[personalthings]

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

[alemoppo]

Menu a fisarmonica?

Ciao!

[dreadnaut]

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

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

[personalthings]

Menu a fisarmonica?

Ciao!

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

[alemoppo]

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!

[personalthings]

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.

[GraphOGLRisorse]

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.

[personalthings]

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

[alemoppo]

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!

[personalthings]

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?

[GraphOGLRisorse]

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.