ho trovato questo menu su internet e vorrei usarlo, sono quasi riuscito a farlo funzionare, ma una cosa non mi riesce, questo è il listato:
parte HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Sliding Doors Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="v1.css" />
</head>
<body>
<div id="header">
<ul>
[*]Home
[*]News
[*]Products
[*]About
[*]Contact
[/list]
</div>
</body>
</html>
*********************************************
parte del CSS
BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #fff;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
FONT: small/1.5em Georgia,Serif;
COLOR: #000;
PADDING-TOP: 0px;
voice-family: inherit;
}
UNKNOWN {
FONT-SIZE: small;
}
#header {
FONT-SIZE: 93%;
BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom;
FLOAT: left;
WIDTH: 100%;
LINE-HEIGHT: normal;
}
#header UL {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 10px;
LIST-STYLE-TYPE: none;
}
#header LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 9px;
BACKGROUND: url(left.gif) no-repeat left top;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
}
#header A {
PADDING-RIGHT: 15px;
DISPLAY: block;
PADDING-LEFT: 6px;
FONT-WEIGHT: bold;
BACKGROUND: url(right.gif) no-repeat right top;
FLOAT: left;
PADDING-BOTTOM: 4px;
COLOR: #A06554;
PADDING-TOP: 5px;
TEXT-DECORATION: none;
}
#header A {
FLOAT: none;
}
#header A:hover {
COLOR: #FF0000;
}
#header a:active {
BACKGROUND-IMAGE: url(left_on.gif);
}
#header a:active {
BACKGROUND-IMAGE: url(right_on.gif);
PADDING-BOTTOM: 5px;
COLOR: #333;
}
****************************************
quello che non riesco a farsi che cambi è quando faccio il click su di una linguetta, la parte right cambia e usa l'immagine right_on.gif mentre non cambia la parte left, ovvero non riesco a fargli usare l'immagine left_on.gif.
qualcuno mi può aiutare?
grazie per ora
Rispondi quotando
