How can I highlight clicked menu item?

**mojobullfrog** · 01-27-2010, 05:42 AM

Hi all,

I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state.

Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element.

Take a look at a basic example I've mocked up, and see the code below:

CSS:

Code:

#navlist {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	font-weight:bold;
	list-style:none;
}
#navlist a {
	display:block;
	width:155px;
	color:#fff;
	text-decoration:none;
	background:url(../images/tab.gif) no-repeat;
	padding-top: 7px;
	padding-right: 4px;
	padding-bottom: 6px;
	padding-left: 10px;
}
#navlist a:hover { 
    background-position:0 -29px;
    color: #1e5ebd;
}
#navlist a:active {
    background-position:0 -58px;
    color:#1e5ebd;
}

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>

<link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />




<script>
function changeFlash(url){
var d=document;
(d.all)? d.all("flashMov1").movie = url :
d.embeds["flashMov2"].src = url;
}
</script>

</head>



<body>



	<!-- Tour Box Begins Here -->
	
	<div id="box">
	
		<div id="titleBar"></div>
		
		<div id="content">
		
			<div id="menu">
			
				
				
				
				<ul id="navlist">
					<li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
					<li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
					<li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
				</ul>

				
					
			</div>
			
			<div id="videoDisplay">
				  <object id=flashMov1
					classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
					codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
					width="233" height="156">
					<param name="movie" value="sb-main.swf" />
					<param name="quality" value="high" />
					<param name="SCALE" value="exactfit" />
					<embed src="sb-main.swf"
					width="233" height="156" name=flashMov2 quality=high
					type="application/x-shockwave-flash"
					pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
				  </object>
			</div>
		
		</div>
		
	</div>

	<!-- Tour Box Ends Here -->


</body>

</html>

**Nile** · 01-28-2010, 01:17 AM

Insert this in the <head> part of your page:

Code:

	<script type="text/javascript">
	var active_swap = function(){
	  var nav_el = document.getElementById("navlist").getElementsByTagName("a");
	    for(var i = 0; i < nav_el.length; i++){
		  nav_el[i].onclick = function(){
		    if(this.className != "active"){
			  for(var x = 0; x < nav_el.length; x++){
			    nav_el[x].className = "";
			  }
			  this.className = "active";
			}
		  }
		}
	};
	</script>

At the bottom of the page, before the </body> tag add:

Code:

	<script type="text/javascript">
	  active_swap();
	</script>

Change:

Code:

#navlist a:active {
    background-position:0 -58px;
    color:#1e5ebd;
}

To:

Code:

#navlist a:active, #navlist a.active {
    background-position:0 -58px;
    color:#1e5ebd;
}

Thread: How can I highlight clicked menu item?

Thread Tools

Search Thread

How can I highlight clicked menu item?

Bookmarks

Bookmarks

Posting Permissions