SitePoint Sponsor

User Tag List

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

    navigation question

    Hi,

    I am working on a website with a navigation menu that has a drop down action. So basically, if you click on the link, "Services", 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


    Here is the code for that menu:

    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>

    Css for the navigation is below:

    Code:
    
    #nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
    #nav a:hover {text-decoration:underline;}
    #nav dt b {display:block;
    color:#fff;
    height:25px;
    line-height:35px;
    padding-left:10px;
    cursor:pointer;
    width:173px;
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase; 
    padding: 10px 10px 10px 10px; 
    background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
    border-left: 5px solid #7c7ca5;
    border-bottom: 1px solid #fff;
    }
    
    #nav dt a {color:#fff; text-decoration:none;}
    #nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
    #nav dd ul {padding:0; margin:0; list-style:none;}
    #nav dd ul li {padding-left:20px;}
    #nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
    color:#333399; text-decoration:none; line-height: 1.5;}


    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.

    Thanks,
    Sarb

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I'm assuming the menu is a separate file that is included by some kind of server-side code? If so, the best and easiest way to achieve that (in my view) is by CSS.

    What you do is you add a class along the lines of <body class="page_services">, and then you add an identifier to all submenus, eg <dd id="menu_services">. Then all you do is add to your CSS file something along the lines of:
    Code:
    .page_services #menu_services,
    .page_employment #menu_employment,
    .page_about #menu_about
    {...styles for static display here...}
    That means that whatever page_name you are on, the corresponding menu_name will be displayed static. I agree it is often good practice to include this kind of feature.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, that makes sense using the class, but I'm not sure how to write the css code to make the menu items look just like the rest of the list, but stay open/static.


    Code:
    .page_services #menu_services{}
    
    #menu_services {width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
    #menu_services ul li {padding-left:20px;}
    #menu_services ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;color:#333399; text-decoration:none; line-height: 1.5;}
    Sarahb

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    On each Service page, you could put a class on the <body> element, such as <body class="serv">.

    Then on the <dd> itself, also put a class such as <dd class="serv">.

    Then put this in your style sheet:

    Code:
    .serv #nav dd.serv {display: block;}
    Because the dropdown is controlled by JS, I'm not sure if that will work, though, as the JS inserts an inline style of display: none on the <dd>. If the above code doesn't work, you'll need to alter the JS itself, in which case this thread might have to move to the JS forum.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help.

    I added the code to the "Lifecare" Tab since there were only 3 drop down links on that one. Not so many to mess with. Unfortunately, it doesn't seem to be working for me, still closes when goes to one of the other links under the "Lifecare" heading. I may not be doing it correctly though. Your thoughts?

    Link to page:
    http://www.oaknoll.com/test/test_index1.asp

    Here is what I did:

    css code:
    Code:
    
    #nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
    #nav a:hover {text-decoration:underline;}
    #nav dt b {display:block;
    color:#fff;
    height:25px;
    line-height:35px;
    padding-left:10px;
    cursor:pointer;
    width:173px;
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase; 
    padding: 10px 10px 10px 10px; 
    background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
    border-left: 5px solid #7c7ca5;
    border-bottom: 1px solid #fff;
    }
    
    #nav dt a {color:#fff; text-decoration:none;}
    #nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
    #nav dd ul {padding:0; margin:0; list-style:none;}
    #nav dd ul li {padding-left:20px;}
    #nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
    color:#333399; text-decoration:none; line-height: 1.5;}
    
    
    .lifecare #nav dd.lifecare {display: block;}
    html code:

    Code:
    </head>
    
    
    <body class="lifecare">
    
    <div id="container">
    
     <!--#include virtual="test/includes/header_asp.asp"-->
    		                 
    		<div id="main">
             
                     <div id="box1">
           <div class="slideshow">
    		<img src="images/sls/dancing3.jpg" width="400" height="287" alt="dancing" class="first" />
    		
    	   </div> <!--end-of-slideshow-->
            </div><!--end-box-1-->

    Here is the navigation html on the include page:

    Code:
      <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 class="lifecare">
    		<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>
    sarahb

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, unfortunately JS overrides the CSS by adding display: none inline on the <dd>. So the JS needs to be modified a bit. I'll move this to that forum.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    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)
    Wouldn't !important make it so that JS wouldn't override the CSS?

    JS just makes the style="" which has slight more specificity.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Wouldn't !important make it so that JS wouldn't override the CSS?
    Good point. It may do ... but the ideal would be to get the JS working as desired. It's just a bit of simple jQuery ... though not too simple for me!

    EDIT:

    Yeah, just tested this in Firebug and it does work to use:

    Code:
    .lifecare #nav dd.lifecare {display: block !important;}
    So there's a CSS solution if a JS solution isn't offered.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    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)
    I'm not overly fluent in JS, but it should be obvious where the display property is being set.

    Post the JS here and I'll have a look at it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    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)
    Yeah just went through the JS.

    If you even CTRL+F for "display" you will eventually find it being set in the JS. In the jquery.cycle.all.latest.js file.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Poster seems to have posted a new thread on the issue: Drop down navigation question
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •