We help IT Professionals succeed at work.

Check out this week's podcast, "Dairy Farms to Databases: Community's Hand in Technology"Listen Now

x

Vertical Rollover Menu?

323 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 one is on us!
(Get your first solution completely free - no credit card required)
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

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.