[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.


http://i55.tinypic.com/ru8hgl.png

[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]

in genere vengono realizzati tramite delle funzioni javascript

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

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.

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

[DooM1]

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]

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]

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 :D ... 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]

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]

Come no

??:confused:

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

[wingman87]

??:confused:

Mi potresti spiegare come fai a mostrare un div nascosto da css dopo il click che, scusa, ma da me non lo sanno ?
:sofico:
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
Ah interessante, non lo sapevo :D ... 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]

La mia era una risposta a questa domanda

Questo l'avevo capito

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]

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ì:

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.

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]

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

[Shinnok.Exor]

a me non funziona molto :stordita:

[wingman87]

Mi sono informato meglio e in effetti con versioni vecchie di IE potrebbero esserci problemi (che vengono fixati con un po' di js).

Comunque ecco un esempio completo. Anche se qui l'ho realizzato con le liste lo si può realizzare anche con altri elementi. Ad ogni modo ho omesso tutti gli stili che rendono il menu esteticamente apprezzabile per sottolineare la parte importante.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>Menu</title>
</head>
<body>
<ul class="menu">
<li>Voce</li>
<li>Menu
<ul>
<li>Voce</li>
<li>Voce</li>
</ul>
</li>
<li>Menu
<ul>
<li>Menu
<ul>
<li>Voce</li>
</ul>
</li>
<li>Voce</li>
</ul>
</li>
</ul>
</body>
</html>
menu.css
ul.menu ul{
display:none;
}

ul.menu li:hover > ul{
display:block;
}