Printable View
ho un frame laterale contenete un menu verticale (si tratat di semplic link) vorrei aggiungere due novità a tale frame.
1) un rollover colorato, qualcosa insomma che modificasse il colore del link evidenziato.
2)unmenu a comparsa. mi spiego meglio, vorrei che al clic sulla voce yyy, la colonna si espandesse mostrando altre voci. un po come l'esplora risorse di windows.
Come si fa?
Ciao, per quanto riguarda il rollover basta qualche riga di CSS da inserire nel tag <STYLE> in cima alla pagina o in un file esterno da collegare attraverso l'attributo <LINK>:
dove RRGGBB sono i codici esadecimali dei colori che vuoi utilizzare.Codice:A { color:#RRGGBB }
A:hover { color:#RRGGBB }
Per quanto riguarda l'effetto scomparsa, potresti giocare un po' con lo script che ho pubblicato in questo thread (peraltro piuttosto recente...): http://forum.altervista.org/showthread.php?t=43734.
Stammi bene...
ok, grazie mille, funziona, le tabelle sono necessarie vero?
vorrei solo che il popup fosse cghiuso all'avvio e che cliccanod si aprisse, credevo bastasse impostare su false la variabile popupOn, ma non è così
A dir la verità, se riesci a farle bene le strutture, le tabelle non servono...
Per quanto riguarda la visibilità iniziale, quello che ho scritto indietro parte dal presupposto che il DIV inizialmente sia visibile, se vuoi il contrario fai così:
- imposta il valore iniziale di popupOn a false e non a true
- scrivi il div a scomparsa così:
<DIV ID="popup" STYLE="display:none"> ... </DIV>
Stammi bene...
funziona perfettamente, grazie ancora, solo che se imposto un rientro del testo per la parte nascosta, non funziona più e ie mi avvisa di un errore nel visualizzare la pagina.
è normale?
Ci sono vari modi per impostare un rientro:
- via HTML, con i tag <BLOCKQUOTE> oppure <Q>
- via CSS, con lo stile padding-left:3em
Quale hai utilizzato? Hai provato anche su altri browser?
Stammi bene...
ho selezionato il testo e impostato il rientro con l'intergfaccia grafica di dreamweaver.
ora provo così.
se ora volessi inserire questo menu in java all'interno dei file js da richiamare con la funzione src, come mi hai consigliato nell'altro 3d, dovrei modificare tutto come con l'html o cosa?
ho provato a inserire document.write(' all'inizio e '); alla fine di ogni riga ma non funziona
in questo 3d spieghi come inserire nelle varie pagine le parti uguali attraverso uno script, convertendo in java l'html delle singole aree. orase volessi inserire queso menu a scomparsa, che mi pare di aver capito che è in java, all'interno di tutte le pagien con il src=, devo modificare in qualche modo lo script? come?
come ti ho detto, ho provato ad inserire i document.write... e i '); e a modificare
' e \, ma non funziona, il menu rimane aperto e non si muove.
Ah, si tratta di JavaScript non di Java (le cose sono diverse)...
Puoi mettere in rete la tua pagina (costruita con lo script) che provo a verificarla? Magari qualcosa ti è sfuggito, perché il mio sito non ha i menu a scomparsa ma i link funzionano esattamente come ho descritto lì...
Stammi bene...
Ragazzi vorrei creare anche io una cosa simile, cioè quando clicco sull'immagine "bottone.gif" si apra soto un piccolo menù con 2 link:
-Chi Siamo
-Contattaci
Mi aiutate??
Prova a guardare la home page del mio sito e dimmi se era qualcosa del genere che volevi fare (clicca sul banner della mia firma e guarda nella barra superiore).
Se ti interessa, ti passo il codice, è un po' lunghino però...
Stammi bene...
we ciao demential scusa se mi faccio sentire dopo un sacco di tempo, ma ho avuto dei prob al pc, mi sto connettendo da quello del mio amico....
Cmq il tuo menù mi piace molto, e mi interesserebbe!
Posti il codice quà per piacere?
Grazie!
Come puoi vedere lo script è una combinazione di HTML, CSS e JavaScript (di più no, ti assicuro...): per la serie "Dopo non lamentatevi che non avete la pappa pronta" ecco il codice, depurato da tutti i document.write() che insidiano lo script in cui è incluso il tutto!!!Se non funziona, forse ho dimenticato di riportare qualcosa...Codice HTML:<HTML>
<HEAD>
...
<STYLE>
IMG.hover { position:relative; top:0.3em; left:0.3em }
IMG.out { position:relative; top:0; left:0 }
DIV.menu_popup { display:none; position:absolute; top:0; left:0; width:...; height:... }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function mouseX (e)
{
return e.clientX + document.body.scrollLeft
}
function mouseY (e)
{
return e.clientY + document.body.scrollTop
}
var menuIDs = new Array ("menu0", "menu1", ...) // elenca qui tutti gli ID menu che hai stabilito
function popdown ()
{
for (var i = 0; i < menuIDs.length; i++)
document.getElementById (menuIDs[i]).style.display = "none"
}
/*
ID: elemento da visualizzare
e: impostare event
*/
function popup (ID, e)
{
popdown ()
document.getElementById (ID).style.display = "block"
document.getElementById (ID).style.top = mouseY (e) - 10
document.getElementById (ID).style.left = mouseX (e) - 10
}
</SCRIPT>
</HEAD>
<BODY>
...
<!-- pulsante di menu # 0-->
<IMG SRC="menu0_pulsante.gif" CLASS="out" WIDTH="..." HEIGHT="..." onMouseOver="this.className='hover'" onMouseOut="this.className='out'" onMouseDown="popup('menu0',event)">
<!-- menu # 0 -->
<DIV CLASS="menu_popup" ID="menu0">
<!-- scrivi qui i contenuti del menu (sono link immagino...) -->
</DIV>
<!-- costruisci altri pulsanti e menu in modo analogo (cambia nomi ai menu!) -->
<IMG SRC="menu1_pulsante.gif" CLASS="out" WIDTH="..." HEIGHT="..." onMouseOver="this.className='hover'" onMouseOut="this.className='out'" onMouseDown="popup('menu1',event)">
<DIV CLASS="menu_popup" ID="menu1">
<!-- scrivi qui i contenuti del menu (sono link immagino...) -->
</DIV>
...
</BODY>
</HTML>
Stammi bene...
P.S. Qualcuno può riguardare il sistema con cui viene colorato il codice? Basta un < dentro lo script e va tutto a put***e!!!
Grazie mille dmential, ora provo e ti faccio sapere!
Scusa il ritardo!
Marco
Demential l'ho usato così:
Però non va! Per piacere mi dici dove ho sbagliato?Codice:<HTML>
<HEAD>
...
<STYLE>
IMG.hover { position:relative; top:0.3em; left:0.3em }
IMG.out { position:relative; top:0; left:0 }
DIV.menu_popup { display:none; position:absolute; top:0; left:0; width:...; height:... }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function mouseX (e)
{
return e.clientX + document.body.scrollLeft
}
function mouseY (e)
{
return e.clientY + document.body.scrollTop
}
var menuIDs = new Array ("menu0")
function popdown ()
{
for (var i = 0; i < menuIDs.length; i++)
document.getElementById (menuIDs[i]).style.display = "none"
}
/*
ID: elemento da visualizzare
e: impostare event
*/
function popup (ID, e)
{
popdown ()
document.getElementById (ID).style.display = "block"
document.getElementById (ID).style.top = mouseY (e) - 10
document.getElementById (ID).style.left = mouseX (e) - 10
}
</SCRIPT>
</HEAD>
<BODY>
...
<!-- pulsante di menu # 0-->
<IMG SRC="button.jpg" CLASS="out" onMouseOver="this.className='hover'" onMouseOut="this.className='out'" onMouseDown="popup("menu0",event)">
<!-- menu # 0 -->
<DIV CLASS="popup_menu" ID="menu0">
<a href="marco.htm">Clicca</a>
</DIV>
</BODY>
</HTML>
EDITO:
Scusatemi se non ho usato l'opzione prima, ma mi sono dimenticato.
Non succederà più!
Marco
Hai annidato male le virgolette: avendo già specificato i doppi apici " per delimitare il valore dell'attributo, devi usare gli apici singoli per delimitare la stringa 'menu0'.Citazione:
Originalmente inviato da marconoviello
Stammi bene...
We demential allora ho levato i doppi apici mettendo quelli singoli, ma è la stessa cosa!!
Che mi dici?
Dove li hai tolti? Li dovevi sostituire solo sulla scritta 'menu0' del tag IMG...Citazione:
Originalmente inviato da marconoviello
Hai una pagina di prova in cui hai realizzato (o provato a realizzare) l'effetto?
Stammi bene...
allora demential ecco quì il link di prova..
http://www.marconoviello.altervista.org/mmmm/marco.htm
fammi sapè per piacere!
Ecco l'errore... hai messo come classe del popup la stringa "popup_menu", quando invece era "menu_popup": devi semplicemente correggere quell'attributo CLASS (la classe "popup_menu" non esiste e quindi il menu è realizzato con le specifiche di default del DIV).
Mi dispiace, è stata una svista nel codice che ti ho copiato... adesso vado a correggerlo anche qui sopra...
Altra cosa: sugli stili width e height io ho messo i puntini, ma per indicare che puoi scrivere i valori che vuoi non indicando che puoi saltarli a piè pari (se non li metti, l'effetto non riesce, perché non c'è una larghezza prestabilita).
Stammi bene...