3 svar · 354 visningar · startad av joel_sundkvist
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
Om du lägger till följande kod kommer en "navbarActive"-länk att vara fet även när du för musen över den - är det en tänkbar lösning?
.navbarActive:hover {
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: #86857a;
text-decoration: none;
}
Har testat detta men javascriptet verkar inte funka med denna variant...
kan inte javascript så bra men antar att man måste ändra nåt i scriptet också?
OK - vi pratar DHTML här (Javascript tungt inblandat )
Vi får väl se om du kan få mer hjälp om tråden flyttas från HTML, XHTML & CSS..