Grow your CSS skills. Land your dream job.

Navigation sprite active state

  • # November 24, 2012 at 2:49 pm

    Hi I am new to web design and I am using a sprite image for a vertical menu. I have it working fine in it’s normal and hover state but I am struggling wit the coding for the active state (current page).

    Here is what I am doing html:

  • Home
  • css:

    #mainNav li.buttonOne li.focus {
    background:url(../_images/navigation.gif) no-repeat;
    background-position: -400px 0px;
    width:200px;
    margin: 0px;
    padding: 0px;
    height: 43px;

    I know the back-ground position etc are correct but I don’t really know how to select the active page within the html and then how to control that with css. Any help gratefully received :-)

# November 24, 2012 at 2:58 pm

see the html came out as a link. Essentially I have given each link a class so that I can position the image for each link, button one, two. I then tried to give it a second class of focus when it was the active page so on the home page the class was

  • Hope this makes sense.

  • # November 24, 2012 at 2:58 pm

    There are a few ways to indicate an active state.

    One is to use javascript to apply an ‘active’ class the other involves setting an individual class to each page body and using that as a hook for your css.

    # November 24, 2012 at 3:01 pm

    Sorry Third time lucky here is the html

        
  • Home
  • 
    

    # November 24, 2012 at 3:06 pm

    Thanks Paulie. I have never used javascrpt and would like to stick to html and css for now if possible. Can you give me an example of how to set an individual class to each page and then use that in the css? That’s what I don’t know how to do!

    # November 24, 2012 at 6:06 pm

    Found a great example on this site and worked it out. Thanks

    http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/

    Viewing 6 posts - 1 through 6 (of 6 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".