Har lite problem med en meny... Har ett javascript som känner av att vilka menyclasser som skall användas. Använder detta för spårbarhet i menyn på den sida som är aktiv.
Problemet är att vid onmouseover på den aktiva länken (som har classen .navbarActive) så åker menyn lite i sidled pga font-weight antar jag.
Känner att min hjärna inte är på topp och svaret kan säkert finnas närmare än man tror. Hoppas jag förklarat så ni förstår... (jag gör det inte) ;)
Lite kod:
<script language="javascript">
function test(){
var ett = document.links.length;
var sida = document.location;
for(i=0; i<=ett-1;i++){
if(document.links[i].href == sida){
document.links[i].className = "navbarActive";
}
else{
document.links[i].className = "navbar";
}
//alert("hej");
}
}
</script>
</head>
<body onload="test();">
<table width="700" align="center" cellpadding="0" cellspacing="0" style="border-left:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;">
<tr>
<td style="border-bottom:1px solid #ccc; width:700px; height:185px;">
<img src="gfx/header2.jpg" alt="till startsidan" width="700" height="185" border="0" usemap="#Map" class="no_border" />
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #ccc;height:20px;vertical-align:middle;background-color:whitesmoke;">
<p style="display:inline;" class="navbar"><a href="index.php">home</a> <a href="./index3.php">Biography</a>
<a href="./index2.php">Upcoming events</a>
<a href="./index3.php?page=repertoire">repertoire</a> <a href="./index3.php?page=press">press-kit</a>
<a href="./index3.php?page=links">links</a> <a href="./index3.php?page=contact">contact</a></p>
</td>
</tr>
och css:
.navbar a {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Lucida, Helvetica, Sans-Serif;
font-size: 9px;
line-height: 14px;
font-weight:normal;
letter-spacing:3px;
text-transform: uppercase;
padding-right:10px;
color: #363636;
text-decoration: none;
}
.navbar a:hover {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Lucida, Helvetica, Sans-Serif;
font-size: 9px;
font-weight:normal;
line-height: 14px;
letter-spacing:3px;
text-transform: uppercase;
padding-right:10px;
color: #86857a;
text-decoration: none;
}
.navbarActive {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Lucida, Helvetica, Sans-Serif;
font-size: 9px;
font-weight:bold;
line-height: 14px;
letter-spacing:3px;
text-transform: uppercase;
padding-right:10px;
color: #000000;
text-decoration: none;
}
Sidan med dess meny finns för allmän beskådning på https://www.joelsundkvist.com