Drop down navigation question

Hi all,


I started this in Css, but am not sure if it’s a css issue or a javascript issue. Wondered if someone could help.

I am working on a website with a navigation menu that has a drop down action. So basically, if you click on the link, “Lifecare”, a drop down list appears below it. I have the navigation attached to the webpage as an “include” so that I don’t have to change it on every page.

Here is a link to the page with the drop down navigation on the left.


The client has asked that when a viewer is in, for example, the “Services” tab, the drop down items stay in a static dropped down state on all the “Services” pages so that their clients won’t have to keep going back and forth to see all the links that are in the “Services” tab. Would like the menu to stay open when they are in, for example, services. I have taken a screen shot of what I want it to look like.

I’m not really sure how to single out an element like this. Not sure if I need to change something in the javascript or is it something I can do in the css?

Any help/advice would be appreciated.

Here is the JS code for that menu:

// JavaScript Document

/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
This is the javascript code for the left hand navigation on New Oaknoll website
=================================================================== */

	if($("#nav")) {
		$("#nav dd").hide();
		$("#nav dt b").click(function() {
			if(this.className.indexOf("clicked") != -1) {
			else {
				$("#nav dt b").removeClass();
				$("#nav dd:visible").slideUp(200);

HTML for the navigation page:

<!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">
<title>Oaknoll - An Adult Retirement Community</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords"
 content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description"
 content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">


         <div id="navcap">
          <img src="images/navigation-cap.gif" width="200" height="18" alt="navigation cap" />

 <div id="nav">

	<dt> <a href="test_index1.asp"><b>Home</b></a> </dt>



			<li><a href="test_independent_living.asp">Independent Living</a></li>
			<li><a href="test_assisted.asp">Assisted Living</a></li>
			<li><a href="test_health_center.asp">Health Center</a></li>

	<dt><b>Health Services</b></dt>
			<li><a href="test_social_services.asp">Social Services</a></li>
	        <li><a href="test_health_services.asp">Health Services</a></li>
			<li><a href="test_physical_therapy.asp">Physical Therapy</a></li>
            <li><a href="test_dietician.asp">Dietician</a></li>
          <li><a href="test_companions.asp">Companions</a></li>
			<li><a href="test_dining.asp">Dining Services</a></li>
			<li><a href="test_transportation.asp">Transportation</a></li>
			<li><a href="test_theater.asp">Movie Theater</a></li>
			<li><a href="test_internet_cafe.asp">Internet Cafe/Coffee Shop</a></li>
			<li><a href="test_game_rooms.asp">Game Rooms</a></li>
            <li><a href="test_libraries.asp">Library</a></li>
            <li><a href="test_sewing.asp">Sewing Room</a></li>


			<li><a href="test_wellness.asp">Wellness</a></li>
            <li><a href="test_programs.asp">Programs</a></li>
			<li><a href="test_pool.asp">Pool/Spa</a></li>
			<li><a href="test_salon.asp">Salon</a></li>
    <dt><b>About Oaknoll</b></dt>
			<li><a href="test_history.asp">History</a></li>
            <li><a href="test_resident_council.asp">Oaknoll Resident Council</a></li>
            <li><a href="test_board_of_directors.asp">Board of Directors</a></li>
            <li><a href="test_foundation_board.asp">Foundation Board</a></li>

			<li><a href="test_maintenance.asp">Maintenance</a></li>
			<li><a href="test_housekeeping.asp">Housekeeping</a></li>
			<li><a href="test_laundry.asp">Laundry</a></li>
			<li><a href="test_technology.asp">Technology</a></li>
            <li><a href="test_banking.asp">Banking</a></li>


        <li><a href="test_employment.asp">Employment</a></li>
			<li><a href="test_jobopenings_new_website.asp">Current Openings</a></li>
			<li><a href="pdf/Application_2012_for_website.pdf" target="blank">Application</a></li>

<dt><a href="test_contact.asp"><b>Contact Us</b></a></dt>


  <div id="ldirector">
	  <a href="test_executive_director.asp"><p>Patricia Heiden ~ <br />
            A Director With a Dream. <br/><br/>
            Click here to learn more...</p></a>
</div> <!--director-end-->

<div id="ladministrator">
<a href="test_administrator.asp"><p>Meet <br/>
Steve Roe, <br />
			    our Administrator</p></a>
</div> <!--administrator-end-->



Previous work on this same issue is in the [navigation question](http://www.sitepoint.com/forums/showthread.php?836495-navigation-question thread.) thread.

Perhaps one of those threads can be closed? As to avoid work being done in both threads?

Good news, that other thread is already closed, with a link pointing to this one.

Sorry about that, someone at the css forum suggested I post on this forum too in case it was a java script issue, not css so I went ahead and posted on both.

I did try adding the !important; to the css as suggested in the css forum:

.lifecare #nav dd.lifecare {display: block; !important;}

But that didn’t seem to help. Won’t stay open.

Any JS suggestions?


One way is to place a class name on each <dt> element of the menu.

<dt class="lifecare"><b>LifeCare</b></dt>
<dt class="health-services"><b>Health Services</b></dt>

Now for each page that you want to services menu to show, you can place a class name on the body of each of those pages.

<body class="services">

This may look like a lot of CSS work, but it’s laying the foundation for what scripting will be using.

After the menu script has been run, you can check to see if the document.body.className exists in the navigation.
The menu uses the <b> element to trigger the opening/closing, so we can find that <b> element and click on it from within the script.

$('#nav .' + document.body.className).find('b').click();

Off Topic:

It’s better to use Paul’s JS solution, but for the record, you didn’t copy that CSS code properly.

The code I gave was

.lifecare #nav dd.lifecare {display: block !important[COLOR="#FF0000"];[/COLOR]}

Notice that the semi-colon is after !important, not before.