PDA

Visualizza la versione completa : Sfondo menų


marcorai
02-05-2003, 16:41
Ciao.
Scusate il livello...

Vorrei ottenete un effetto simile al menų laterale sinistro di questo sito: www.brinkster.com, anche se vorrei che i colori di sfondo sull'hover cambiassero a seconda delle sezioni (che so giallo la prima, verde la seconda...)
Con cosa lo ottengo, con un javascript? Se sė, quale?

Grazie!
Marco

herrel
02-05-2003, 16:56
puoi fare tutto con i CSS facilmente, li conosci?

marcorai
02-05-2003, 17:08
Ci avevo pensato, perō non riesco a fare lo sfondo della tabella che ha un comportamento hover.
Mi spiego meglio...

Credo che facendo delle classi
a.menugiallo.hover
a.menuverde.hover
riuscirei solo a rendere il testo di un colore diverso.
Non so invece come fare per lo sfondo della cella...

Marco

herrel
02-05-2003, 17:10
eccoti un esempiello veloce veloce:

<html>
<head>
<title>Menu con rollover bordi</title>
<style>
table {
border: 1px solid black;}
td {
height:25px;
border: 1px solid white;
font-family: verdana;
font-size:10px;
background:white;}
td a:link {
position:relative;
display:block;
font-size:10px;
color: #061998;
text-decoration: none;}
td a:hover {
position:relative;
font-size:10px;
color: #4ebafa;
text-decoration: none;}
td a:visited {
font-size:10px;
color: #4ebafa;
text-decoration: none;}
.due {
border: 1px solid black;
background:#b1f3e4;}

</style>

</head>

<body>
<table width=150 height=70 border=0>
<tr><td style="background:#d0cece;"><center>:: menų ::<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>home page<center> (ciao1.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>news<center> (ciao2.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>info<center> (ciao3.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>portfolio<center> (ciao4.htm)</td></tr></table>
</body>
</html>

provalo e fammi sapere!!!


:ciauz:

marcorai
02-05-2003, 17:13
Orka l'oca!
Volevo far festa ma mi metto subito al lavoro.
Grazie per ora!

Marco
Forza Viola
(tanto non vi si dā certo noia, visto come siam messi!!!)
:))

herrel
02-05-2003, 17:20
Originariamente inviato da marcorai
Orka l'oca!
Volevo far festa ma mi metto subito al lavoro.
Grazie per ora!

Marco
Forza Viola
(tanto non vi si dā certo noia, visto come siam messi!!!)
:))


:D
visto che sei pratico credo nn avrai problemi a modificarlo secondo le tue esigenze!!!

cmq se vuoi una mano sono qui alcora un'altra ora!!!

;)

herrel
02-05-2003, 17:23
attenzione!!!

se usi il mio codice in una tua pagina devi creare delle classi perchč per fare prima ho utilizzato direttamente i tag, per intenderci nel css ho messo "td" questo significa che tutti i td della tua pagina saranno uguali :eek: crea delle classi cosė nn avrai problemi (chiaramente lo stesso vale per gli altri tag inseriti nel CSS!!)


ciao buon lavoro!

piero06
02-05-2003, 19:24
Originariamente inviato da herrel
eccoti un esempiello veloce veloce:

<html>
<head>
<title>Menu con rollover bordi</title>
<style>
table {
border: 1px solid black;}
td {
height:25px;
border: 1px solid white;
font-family: verdana;
font-size:10px;
background:white;}
td a:link {
position:relative;
display:block;
font-size:10px;
color: #061998;
text-decoration: none;}
td a:hover {
position:relative;
font-size:10px;
color: #4ebafa;
text-decoration: none;}
td a:visited {
font-size:10px;
color: #4ebafa;
text-decoration: none;}
.due {
border: 1px solid black;
background:#b1f3e4;}

</style>

</head>

<body>
<table width=150 height=70 border=0>
<tr><td style="background:#d0cece;"><center>:: menų ::<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>home page<center> (ciao1.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>news<center> (ciao2.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>info<center> (ciao3.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>portfolio<center> (ciao4.htm)</td></tr></table>
</body>
</html>

provalo e fammi sapere!!!


:ciauz:

Bellissimo, lo ho provato e mi piace davvero molto !!!

Complimenti!

Credo che lo userō anch'io !

ciao

Dr Mal
03-05-2003, 12:41
Originariamente inviato da herrel
eccoti un esempiello veloce veloce:

<html>
<head>
<title>Menu con rollover bordi</title>
<style>
table {
border: 1px solid black;}
td {
height:25px;
border: 1px solid white;
font-family: verdana;
font-size:10px;
background:white;}
td a:link {
position:relative;
display:block;
font-size:10px;
color: #061998;
text-decoration: none;}
td a:hover {
position:relative;
font-size:10px;
color: #4ebafa;
text-decoration: none;}
td a:visited {
font-size:10px;
color: #4ebafa;
text-decoration: none;}
.due {
border: 1px solid black;
background:#b1f3e4;}

</style>

</head>

<body>
<table width=150 height=70 border=0>
<tr><td style="background:#d0cece;"><center>:: menų ::<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>home page<center> (ciao1.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>news<center> (ciao2.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>info<center> (ciao3.htm)</td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>portfolio<center> (ciao4.htm)</td></tr></table>
</body>
</html>

provalo e fammi sapere!!!


:ciauz: Ebbravo herrel!!!! :gren:
;)

piero06
03-05-2003, 15:11
Originariamente inviato da Dr Mal
Ebbravo herrel!!!! :gren:
;)

-ESATTO !! :gren:

Loading