SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down navigation question

    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.

    screen-print.jpg


    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:


    Code:
    // 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:

    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>
    <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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Previous work on this same issue is in the navigation question thread.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Perhaps one of those threads can be closed? As to avoid work being done in both threads?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Thanks,
    sarahb

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by sarb View Post
    Any JS suggestions?
    One way is to place a class name on each <dt> element of the menu.

    HTML Code:
    <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.

    HTML Code:
    <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.

    Code javascript:
    $('#nav .' + document.body.className).find('b').click();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:

    Quote Originally Posted by sarb View Post
    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.
    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

    Code:
    .lifecare #nav dd.lifecare {display: block !important;}
    Notice that the semi-colon is after !important, not before.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •