Problema con menu

**Elieli** · 09-01-2004, 17:47

Ripropongo il problema:
Nell'esempio metto il menu incriminato, provate a cliccare sulle voci, ad esempio News.
Come faccio ad evitare lo scroll della pagina???

P.S. non posso posizionare la tabella contenente le voci di menu in fondo perchè il contenuto della pagina è dinamico per cui le coordinare relative varierebbero, e non posso usare coordinate assolute perchè voglio che la tendina rimanga sotto alla sua voce!

Chissà se oggi qualcuno mi sa aiutare

Grazie

**Francis87** · 09-01-2004, 17:54

perchè aprire un altro thread con la stessa domanda?
il regolamento non dovrebbe esser molto d'accordo....

:master:

**Elieli** · 09-01-2004, 17:59

scusate non pensavo fosse un problema!
ho provato a riproporre in modo diverso la domanda perchè penso di non essermi affatto spiegata ieri

**Stanislao** · 09-01-2004, 23:33

semplice!

non usare quel javascipt!
ce ne sono di migliori in giro anche di gia fatti!!
se vai http://www.html.it/jscript/

oppure www.asbafo.net sezione applet e javascript in menu navigazione

ce ne sono a sbafo

**Marcolino's** · 10-01-2004, 00:45

altra cosa usa un layer qui : <span class="submenu" id="sub1">
il problema dello scrolling è dovuto al javascript che ti "riscrive" la pagina ogni santa volta che fai click su di un menù, in pratica ogni volta vai a sommare il valore di top al valore dell'altro top precedente invece di prendere sempre il valore top della pagina.
Non ho analizzato bene il codice è troppo tardi e non vorrei dire una cavolata (dovrei provarlo) prima ma penso che il tuo menù si può realizzare in puro css.

**Marcolino's** · 10-01-2004, 00:59

Fatto!
Ho modificato il codice che ho postato in un altro topic in questo stesso forum e l'ho provato: funziona!

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Dev-PHP 1.9.4">
<title>Visualizzazione di un box</title>
</head>
<style type='text/css' media='screen'>
body {
  background-color: #f5f5f5;
  color: #000000;
  font-family: verdana, sans-serif;
  font-size: 0.8em;
  margin: 0;
  padding: 0;
}
div#menu {
	border: 3px double #000000;
	position: absolute;
	top: 0;
	left: 0;
}
div#menu a {
	color: Black;
}
div#menu a span.a {
   display: none;
}
div#menu a span.b {
   display: none;
}
div#menu a span.c {
   display: none;
}
div#menu a span.d {
   display: none;
}
div#menu a:hover {
   color: red;
}
div#menu a:hover span.a {
  display: block;
	position: absolute;
	top: 0;
	left: 30px;
	height: 100px;
	width: 100px;
	background-color: #cc00aa;
	border: 1px solid #000000;
}
div#menu a:hover span.b {
  display: block;
	position: absolute;
	top: 0;
	left: 60px;
	height: 100px;
	width: 100px;
	background-color: #cc00aa;
	border: 1px solid #000000;
}
div#menu a:hover span.c {
  display: block;
	position: absolute;
	top: 0;
	left: 70px;
	height: 100px;
	width: 100px;
	background-color: #cc00aa;
	border: 1px solid #000000;
}
div#menu a:hover span.d {
  display: block;
	position: absolute;
	top: 0;
	left: 100px;
	height: 100px;
	width: 100px;
	background-color: #cc00aa;
	border: 1px solid #000000;
}
ul {
  list-style: none;
}
</style>
<body>
<div id='menu'>
  [....]<span class='a'><ul>[*]<a href='#'>prova[/list]</span></a>
  [....]<span class='b'><ul>[*]<a href='#'>prova[/list]</span></a>
  [....]<span class='c'><ul>[*]<a href='#'>prova[/list]</span></a>
  [....]<span class='d'><ul>[*]<a href='#'>prova[/list]</span></a>
</div>
</body>
</html>

ovviamente deve essere modificato per essere inserito nella tua pagina, ma ha il pregio di non usare javascript e quindi di poter funzionare sempre e comunque (testato con opera6/7, mozilla, firebird, IE5.x/6, mi spiace non ho NN ma li dubito che funzioni in quanto NN non supporta la proprietà display: none).
Per il resto che dire, ogni implementazione seria deve tenere conto dei fattori di standard, quindi non è detto che questa sia la soluzione migliore, forse solo la più usabile ma sicuramente quella non definitiva, sempre che tutto ciò abbia un senso

**Jerry Masslo** · 10-01-2004, 01:37

Originariamente inviato da Marcolino's
Fatto!

sempre che tutto ciò abbia un senso

con questa frase comunque gliene hai dato uno, anche se non so bene quale.

Ottima dimostrazione delle potenzialita dei css.

hai dato a tutto top 0, così copri le voci sempre visibili, ma te ne sarai già accorto.

**Marcolino's** · 10-01-2004, 12:12

Ho dato a tutto top 0 perchè le voci devono essere coperte almeno in parte, dato che il puntatore del mouse deve "scivolare" dalla voce del link al box contenente il sotto menù, altrimenti questo si chiude.
E questo è il limite di questo sistema, dato che il box si chiude quando il puntatore esce dalla voce di menù.
Il fatto è che il box è legato all'hover del menù.

Ora questo era solo un semplice esempio senza alcuna pretesa, si può ovviare a ciò usando l'accortezza di modificare il top level del box in modo da farlo apparire, che so, appena sotto il link di menù, come daltronde appaiono normalmente questo tipo di link.
Sai che ti dico, ci poverò a realizzare una pillolona in modo da potersi studiare/utilizzare per chi avrà bisogno di un simile metodo per creare menù "dinamici".

Vado a far la spesa

**Jerry Masslo** · 10-01-2004, 13:18

be' io l'ho provato con un top diverso è mi pare di ricordare funzionasse lo stesso, magari ricordo male.
Il limite è che iexploder non se lo fila e ti pareva, ho cercato in rete se qualcuno avesse trovato qualche escamotage ma per ora mi pare che con soli css non ci sia niente di niente.

**Elieli** · 12-01-2004, 11:16

Splendido! poter far tutto con i soli css penso sia la cosa migliore.
Grazie a tutti. Ora mi studio bene la cosa

P.S.
Scusate il ritardo ma mi sono riconnessa solo questa mattina

Discussione: Problema con menu

Strumenti discussione

Ricerca discussione

Visualizza

Problema con menu

Permessi di invio