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> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>news<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>info<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>portfolio<center> </td></tr></table>
</body>
</html>

provalo e fammi sapere!!!

**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!!!)

)

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

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> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>news<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>info<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>portfolio<center> </td></tr></table>
</body>
</html>

provalo e fammi sapere!!!

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> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>news<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>info<center> </td></tr>
<tr>
<td onMouseOver="this.className='due'" onMouseOut="this.className=''">
<center>portfolio<center> </td></tr></table>
</body>
</html>

provalo e fammi sapere!!!

Ebbravo herrel!!!! :gren:

**piero06** · 03-05-2003, 15:11

Originariamente inviato da Dr Mal
Ebbravo herrel!!!! :gren:

-ESATTO !! :gren:

Discussione: Sfondo menù

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo menù

Css

Permessi di invio