SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Navigation Question: You are here

    Hello everyone I am working on a site for a new client of mine and I have a question about something that has pretty much stumped me...

    I am using a body definition on the major sections of the web site to effect the main navigation to change the button of that section on the main nav to highlight when you are in that section of the web site. This works fine, my problem comes from the sub navigation I created in the Heating Solutions section of the web site.

    In this section I have a sub navigation that runs down the left hand side of the page and I would like this navigation to behave as the main navigation does. I.E. when you click on a section and arrive there the selected item stays highlighted or bold, something to additionally reinforce where the user is at that point. Is is possible to take care of both of these navigation elements with the body definition? Do I need to create sub classes?

    Any suggestions would be greatly appreciated.

    You can find the site at www.ecoheatsolutions.com and the page I am talking about is http://www.ecoheatsolutions.com/heatingsolutions.html

    Thanks.

    Matt
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you asked; a simple idea is to add a class to body corresponding to a class in the submenu and style also the combination. I.e. both menu and submenu.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you give me a give code example of what you mean? I think I know what you mean but it might be easier if I see it...

    Matt
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, if you have an ID attribute on the <body> tag for each major section, and you want that corresponding section's tab on the menu highlighted, then addding a class to the menu would work.

    Code:
    #somePage .current-page {
        /* CSS rules for the "current page state" go here */
    }
    Obviously, #somePage would be the ID for the <body> tag, and .current-page would be the class used on the menu item for that particular page. It's messy, but it works.

    Though I'd prefer to use a server-side programming language to just apply a class to the current page (I don't know how to do this per se, but it shouldn't be that hard to do), and then style the link with that class directly.

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an example:
    Code CSS:
    .about #about {
    	/* menu-here style */
      }
    .about .company #company{
    	/* submenu-here style */
      }
    Code HTML4Strict:
    <body class="about, company">
    	<div class="menu">
    		<ul>
    			<li><a id="home" href="/" title="Home Page">Home</a></li>
    			<li><a id="about" href="/about/" title="About us">About Us</a>
    				<ul>
    				<li><a id="company" href="/about/company/" title="About our company">Company</a></li>
    				<li><a id="policy" href="/about/policy/" title="About our policy">Policy</a></li>
    				</ul>
    			</li>

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (psst - you forgot to close the main list, and you don't need the DIV since you can apply the class to the parent list instead and style from there - other than that, looks really good)

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan. I just stopped writing... and began edit what I just wrote.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, no problem. I just fixed a CSS error I had caused in another thread (it's late here) myself. It happens to even the best of us from time to time.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help guys, I will definitely use this on a upcoming project I am working on....
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com


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
  •