[HTML] menu a tendina?

[diablo...aka...boss]

Ciao, non sono pratico di html perchè lo sto imparando da poco, vorrei capire come riprodurre il "menu a tendina" nella foto sotto, quello a scomparsa/cascata. Ha un nome specifico? Io lo chiamo "menu a tendina" ma non sono certo che sia la corretta denominazione.

[bobbytre]

in genere vengono realizzati tramite delle funzioni javascript

[Shinnok.Exor]

Fai un div nascosto nel riquadro, con le info da visualizzare, e dai all'evento onclick di quell'immagine con il + (immagine, button, div con sfondo ecc...) la funzione di visualizzare il div nascosto cambiando l'attributo css display.

[diablo...aka...boss]

Originariamente inviato da bobbytre

in genere vengono realizzati tramite delle funzioni javascript

ok, provo a fare una ricerca sul web per vedere se trovo qualcosa.

Originariamente inviato da Shinnok.Exor

Fai un div nascosto nel riquadro, con le info da visualizzare, e dai all'evento onclick di quell'immagine con il + (immagine, button, div con sfondo ecc...) la funzione di visualizzare il div nascosto cambiando l'attributo css display.

appena traduco quello che hai scritto vedo se riesco a farlo.

[DooM1]

Originariamente inviato da Shinnok.Exor

Fai un div nascosto nel riquadro, con le info da visualizzare, e dai all'evento onclick di quell'immagine con il + (immagine, button, div con sfondo ecc...) la funzione di visualizzare il div nascosto cambiando l'attributo css display.

Scusate l'intrusione, ma mi interessa.
Volevo se possibile una precisazione.
Ma ... come si fa a cambiare un attributo di un CSS? Il CSS è un file statico, come diavolo si cambia un attributo?

Percaso c'è da scrivere qualcosa dentro l'evento onclick in modo da fare l'override dell'attributo del CSS ?
E poi, quando parli di funzione, intendi una funzione JS ?
Un breve esempio anche approssimativo di ciò da scrivere nell'evento è chiedere troppo?

[Tadde]

Una soluzione probabilmente più immediata, perché esistono snippet di codice già pronti, è quella di usare jquery che è un framework basato su javascript gratuito e libero.

Quel tipo di menu credo si chiami "accordion menu"

[Johnn]

Giusto:

http://jqueryui.com/demos/accordion/

[Shinnok.Exor]

Originariamente inviato da DooM1

Scusate l'intrusione, ma mi interessa.
Volevo se possibile una precisazione.
Ma ... come si fa a cambiare un attributo di un CSS? Il CSS è un file statico, come diavolo si cambia un attributo?

Percaso c'è da scrivere qualcosa dentro l'evento onclick in modo da fare l'override dell'attributo del CSS ?
E poi, quando parli di funzione, intendi una funzione JS ?
Un breve esempio anche approssimativo di ciò da scrivere nell'evento è chiedere troppo?

Si intendo le funzioni Javascript.
Il CSS è statico, però il browser compila il CSS e lo usa con gli oggetti della pagina HTML, quindi gli attributi css dell'oggetto diventano dinamici.
Con Javascript cambi un attributo JS usando l'attributo style dell'oggetto.

document.getElementById('id_oggetto').style.stile_css.value=''

[DooM1]

Originariamente inviato da Shinnok.Exor

Si intendo le funzioni Javascript.
Il CSS è statico, però il browser compila il CSS e lo usa con gli oggetti della pagina HTML, quindi gli attributi css dell'oggetto diventano dinamici.
Con Javascript cambi un attributo JS usando l'attributo style dell'oggetto.

document.getElementById('id_oggetto').style.stile_css.value=''

Ah interessante, non lo sapevo ... grazie della spiegazione.

Sarà possibile fare un menù a scomparsa anche senza js ?

[wingman87]

Sì è possibile con CSS. Intanto devi mettere il menu che chiamo per semplicità M dentro un contenitore E. Poi nel CSS scrivi:

M{
   display:none;
}

E:hover M{
   display:block; /*ad esempio, comunque non none*/
}

Ovviamente con JS puoi fare cose più raffinate

[Shinnok.Exor]

No non è possibile devi usare per forza JS.
Con l'hover si puoi mostrare il div una volta ma poi non puoi rinasconderlo, perchè il css non è pensato come linguaggio, ma come insieme di attributi.
Per modificare dinamicamente una pagina HTML l'unico linguaggio è il Javascript perchè viene eseguito lato client.

[wingman87]

Originariamente inviato da Shinnok.Exor

Con l'hover si puoi mostrare il div una volta ma poi non puoi rinasconderlo

Come no

[diablo...aka...boss]

Con questa parte di codice riesco a ricreare, in parte, l'effetto desiderato, solo che il menu mi resta fisso. Nel senso che compare solo il "-" e non anche il "+" e quindi non si crea l'effetto a fisarmonica.
Cosa manca? Grazie!


<div class="boxSpacer">
<div class="istitutionalBody">

<h3 id="nome"><a onclick="guideToggle(this)" class="openItem"><span>Nome principale</span></a></h3>

<div class=guideContent><P>Hello world.</P></div>

</div>

<div class="istitutionalBody">

<h3 id="nome2"><a onclick="guideToggle(this)" class="openItem"><span>Nome principale2</span></a></h3>

<div class=guideContent><P>World.</P></div>

</div>
</div>
</div>

[diablo...aka...boss]

Nessuno sa aiutarmi?

[Shinnok.Exor]

Originariamente inviato da wingman87

Come no

??

Mi potresti spiegare come fai a mostrare un div nascosto da css dopo il click che, scusa, ma da me non lo sanno ?

[wingman87]

Originariamente inviato da Shinnok.Exor

??

Mi potresti spiegare come fai a mostrare un div nascosto da css dopo il click che, scusa, ma da me non lo sanno ?

Mi sa che ti sei un po' confuso perché io non ho mai parlato di click.

[Shinnok.Exor]

La mia era una risposta a questa domanda

Originariamente inviato da DooM1

Ah interessante, non lo sapevo ... grazie della spiegazione.

Sarà possibile fare un menù a scomparsa anche senza js ?

il click è implicito XD quindi mi sa che ti sei confuso te
In base a cosa vuoi far ricomparire un div ? Devi associare sempre un evento a quel pulsante/immagine/span che ti mostra il div nascosto. Il css non è dinamico, è un insieme di attributi che non puoi cambiare, tranne che con Javascript (lato client ovviamente)

Io ancora non ho capito cmq come si fa a cambiare un attributo css dinamicamente (semmai fosse possiBBile) lato client senza Javascript (lato server si può, se ti piace fare un form che per mostrare un div ricarica la pagina xD)

[wingman87]

Originariamente inviato da Shinnok.Exor

La mia era una risposta a questa domanda

Questo l'avevo capito

Originariamente inviato da Shinnok.Exor

il click è implicito XD quindi mi sa che ti sei confuso te
E cmq in base a cosa vuoi far ricomparire un div ? Il css non è dinamico, è un insieme di attributi che non puoi cambiare, tranne che con Javascript (lato client ovviamente)

Sono due modi diversi di concepire un menu a scomparsa. Con il metodo che ho suggerito ottieni un menu che compare quando passi il mouse su un dato elemento e scompare quando lo sposti fuori dal menu. Un menu simile a quello in alto su questo sito, solo che qui gli elementi non scompaiono quando esci dal menu ma vengono nascosti quando scegli un altro sottomenu.

[Shinnok.Exor]

Originariamente inviato da wingman87

Sono due modi diversi di concepire un menu a scomparsa. Con il metodo che ho suggerito ottieni un menu che compare quando passi il mouse su un dato elemento e scompare quando lo sposti fuori dal menu. Un menu simile a quello in alto su questo sito, solo che qui gli elementi non scompaiono quando esci dal menu ma vengono nascosti quando scegli un altro sottomenu.

Sisi hai perfettamente ragione sul tuo metodo.
Ma tu hai detto di poterlo fare senza Javascript, direttamente con il css, come hai scritto rispondendo così:

Originariamente inviato da Shinnok.Exor

No non è possibile devi usare per forza JS.
Con l'hover si puoi mostrare il div una volta ma poi non puoi rinasconderlo, perchè il css non è pensato come linguaggio, ma come insieme di attributi.
Per modificare dinamicamente una pagina HTML l'unico linguaggio è il Javascript perchè viene eseguito lato client.

Originariamente inviato da wingman87

Come no

(a meno che non stiamo discutendo per un'incomprensione: io ho detto che non puoi far ricomparire il div dopo l'hover solamente con il CSS, ovviamente usando anche Javascript si può)

Se mi mostri come, l'imparo anch'io

[wingman87]

Originariamente inviato da Shinnok.Exor

Sisi hai perfettamente ragione sul tuo metodo.
Ma tu hai detto di poterlo fare senza Javascript, direttamente con il css. Se mi mostri come, l'imparo anch'io

Post #10