Hjælp til horizontal menu. Highlight af valgt menupunkt
Hej, jeg har fra en tutorial på nettet fundet følgende menu.Problemet er dog imidlertid at den ikke virker helt. Den highlighter nemlig ikke det menupunkt der er valgt. Fra starten er et punkt valgt alt efter hvilket id <body> har. Men jeg kan ikke se hvordan jeg skal kunne skifte det dynamisk så når man har valgt et nyt menupunkt, så fader det gamle ud, og det nye er highligtet. Jeg ville høre om der var nogle der lige kunne overskue hvad der skal gøres.
Mvh. Bumle90
Et eksempel samt billeder til siden kan findes her.
http://www.student.dtu.dk/~s030102
Koden ser således ud :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example 9: Sliding Doors of CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} html>body {font-size:small;}
#header {
float:left;
width:100%;
background:#FFFFFF url("bg.gif") repeat-x bottom; <!-- baggrundsfarve her-->
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left_both.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
#header a {
float:left;
display:block;
width:.1em;
background:url("right_both.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-position:0 -150px;
border-width:0;
}
#header #current a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}
#header li:hover a {
background-position:100% -150px;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li id="current"><a href="#">Forside</a></li>
<li><a href="#" onclick="hilightSel();">Nyheder</a></li>
<li><a href="#">Produkter</a></li>
<li id="nyid"><a href="#">Firmaprofil</a></li>
<li><a href="#">Forretningsbetingelser</a></li>
<li><a href="#">Instrukser</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<br>
<br>
<br>
Billeder der skal bruges:
<br>
<a href="left_both.gif">left_both.gif</a><br>
<a href="left_both.gif">right_both.gif</a>
<br>
<br>
</body>
</html>
