Hide/Show con ancora "#" - aiuto!

[pelandro]

Ciao a tutti, ho un piccolo problema con un codice css. Un piccolo effetto "appari/scompari" di un box realizzato tramite ".menu", ma quando ci clicco si sposta tutto in testa alla pagina, perchè "riferisce" all'ancora #menu (almeno penso sia questo).

Vi chiedo se esiste un altro modo per avere lo stesso effetto hide/show senza che tutta la pagina si sposti in testa all'elemento selezionato.

Questo è il codice:

<style type="text/css" >
.menu span + div { height: 0; position: relative; width: 100%; z-index: 100; overflow: hidden; }
.menu :target span + div { height: 120px; }
.menu :target div { overflow: auto; }
</style>

<div class="menu">
	<div id="menu">
		<span>
			[+]
		</span>
		<div style="background-color: yellow;">
			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

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

[cassano]

Curiosità ma....

.menu :target

:target per cosa sta ?

[pelandro]

Beh, se lo provi senza non funziona! in pratica lo mantiene "chiuso" finchè non appare l'ancora #, il "target"!

Ma mi causa il problema dello spostamento della pagina, perchè l'ancora sposta la pagina (in altezza) al punto in cui è presente il div! Mi servirebbe una strategia differente per questo lavoro (senza l'utilizzo di js).. qualcuno può aiutarmi????

[ratte]

hmmm... il tuo .menu span + div dovrebbe avere position: absolute credo... potrebbe anche avere un margine inferiore negativo di 120px (visto che ha altezza fissa), ma sarebbe meglio position absolute

[sgogghy]

Al di là che io l'ho vedo bene, cioè il box giallo non va in alto ma compare sotto al +, basta definire un margin-top.
Guarda ho usato il tuo codice.

<style type="text/css" >
body{margin:0px;padding:0px;}
#menu{border:1px solid #000;}
.menu span + div { position: relative; width: 100%; z-index: 100; display:none;margin-top:10px; }
.menu :target div { display:block; }
</style>

<div class="menu">
	<div id="menu">
		<span>
			[+]
		</span>
		<div style="background-color:yellow;">
			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

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

Si potrebbe anche fare definendo un position absolute e il relativo top alla div che compare, ma dipende sempre dove devi inserire questo codice.

Spero sia chiaro e soprattutto di aver capito bene

[pelandro]

Ho provato (il position: relative mi serve per spostare gli altri elementi più in basso), ma, poniamo il caso di due di questi codici uno sotto l'altro, proprio come una cassettiera (l'idea del codice è che l'apertura spinga tutto il resto sotto di tot pixel):

<style type="text/css" >
body{margin:0px;padding:0px;}
#menu{border:0px solid #000;}
.menu span + div { position: relative; width: 100%; z-index: 100; display:none;margin-top:10px; }
.menu :target div { display:block; }
</style>

<div class="menu">
	<div id="menu">
		<span>
			[+]
		</span>
		<div style="background-color:yellow;">
			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

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



testo di prova




<style type="text/css" >
#menu2 {border:0px solid #000;}
.menu2 span + div { position: relative; width: 100%; z-index: 100; display:none;margin-top:10px; }
.menu2 :target div { display:block; }
</style>

<div class="menu2">
	<div id="menu2">
		<span>
			[+]
		</span>
		<div style="background-color:yellow;">
			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

			prova testo prova testo prova testo 

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



testo di prova

adesso se restringete il browser in altezza a qualche centinaia di pixel (si, prendete il bordo della finestra in basso e alzatela a più di metà) così da far comparire la barra di scorrimento a lato della pagina, cliccando su uno dei due + si avrà lo scomodo effetto di portare quell'elemento in alto nella pagina (l'effetto causato dall'ancora #). Io è proprio quell'effetto che voglio togliere senza ricorre a JS. Ci sarà un qualche modo per richiamare il "cassetto nascosto" senza smuovere la pagina??

[ratte]

Hmmm... hai creato un ancora ed ora stai trafficando per fare in modo che l'ancora nn funzioni... ha ragione il tuo browser

[Experiment8]

Hai creato un ancora, se stai usando JQuery devi usare la proprietà preventDefault(), se usi javascript aggiungi onclick="return false;" come attributo al link.

[pelandro]

Grazie dei consigli Experiment8, ma onclick="return false;" non funziona affatto (non genera alcun link e il "cassetto" non si apre). Ho provato anche a fargli fare il richiamo completo in js:

onclick="javascript:window.location.href=('#menu'); return false;"

ma non ha funzionato neanche questo (il risultato ritorna uguale al primo esperimento).

Il problema è che ho scelto un ancora per la velocità di esecuzione, ma non riesco a concepire niente altro che si possa adattare allo scopo al suo posto.

[sgogghy]

L'ancora funziona così, l'unico modo è usare JS; posso chiederti perchè non vuoi usare JS?