We help IT Professionals succeed at work.

Vertical Rollover Menu?

324 Views
Last Modified: 2013-11-19
Hi,

I am trying to find out how I can create this vertical menu that when you click one of the links it gets highlighted or bolded.  Something to indicate it is selected.  When one link is selected and you click another link, the link that WAS selected should become unselected.

How can I do this using CSS and/or Javascript?

Here is my code:

<div id="adminLeftNav">
            
            <a href="#">Admin Home</a><br/>
            <a href="#">Reports</a><br/>
                <a href="#">Users</a>
                  
</div>

Thanks,

-ws
Comment
Watch Question

RartemassLife Coach
CERTIFIED EXPERT

Commented:
The website a list apart gives great examples for this.

Try this one:
http://www.alistapart.com/articles/dropdowns
Top Expert 2007

Commented:
something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
<html> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>Untitled</title> 
	<style type="text/css">
		a.off{color:green;font-weight:normal}
		a.on{color:green;font-weight:bold}
	</style>
	<script>
 
	function setLink(p,a){
	  for(var i=0; i<p.getElementsByTagName('a').length; i++){ //loop through all child li's and set to off
	  	p.getElementsByTagName('a')[i].className = 'off';
	  }
	  a.className = 'on';
	}
	</script>
 
</head> 
<body>
	
	<div id="adminLeftNav">
            <a href="javascript:void(0)" class="off" onclick="setLink(this.parentNode,this)">Admin Home</a><br/>
            <a href="javascript:void(0)" class="off" onclick="setLink(this.parentNode,this)">Reports</a><br/>
            <a href="javascript:void(0)" class="off" onclick="setLink(this.parentNode,this)">Users</a>
	</div>
	
</body>
</html> 

Open in new window

RartemassLife Coach
CERTIFIED EXPERT

Commented:
Here is the example output from it:
http://www.htmldog.com/articles/suckerfish/example/

Author

Commented:
Hi,

@Virus - This seems to work but if the page is reloaded the link does not remain highlighted or bolded.

@Rartemass: - I have heard of this site, I will check it out a bit more.

Thanks

-ws
Top Expert 2007
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Hi,

The body id/class method does not quite work for me because our pages are simply dropped into a wrapper or template.  Each individual page in our site does not have a <body> tag.  The template I have just contains header, nav, footer, etc.  When a request comes to the webserver the page loads the template then populates the page dynamically with content from a combination of the db and some web services at time.

Your solutions do work however, but without dynamically populating the id attribute of the body tag I am not sure of another way I would do it.  I figure I would need to create some db table and go from there...

-ws