Hi all,
Hi,
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.
http://www.oaknoll.com/test/test_index1.asp
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
=================================================================== */
$(document).ready(function(){
if($("#nav")) {
$("#nav dd").hide();
$("#nav dt b").click(function() {
if(this.className.indexOf("clicked") != -1) {
$(this).parent().next().slideUp(200);
$(this).removeClass("clicked");
}
else {
$("#nav dt b").removeClass();
$(this).addClass("clicked");
$("#nav dd:visible").slideUp(200);
$(this).parent().next().slideDown(500);
}
});
}
});
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">
<head>
<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">
</head>
<body>
<div id="navcap">
<img src="images/navigation-cap.gif" width="200" height="18" alt="navigation cap" />
</div><!--end-navcap-->
<div id="nav">
<dt> <a href="test_index1.asp"><b>Home</b></a> </dt>
<dt><b>LifeCare</b></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><b>Health Services</b></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><b>Amenities</b></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><b>Recreation/Wellness</b></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><b>About Oaknoll</b></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><b>Services</b></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><b>Employment</b></dt>
<dd>
<ul>
<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>
</ul>
</dd>
<dt><a href="test_contact.asp"><b>Contact Us</b></a></dt>
</div>
<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-->
</body>
</html>
Thanks,
sarahb