SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to keep hover state stick on current page.

    I want to use my hover states, on the main navigation bar, to stick on their respective pages to inform users which page they are on.

    What's the easiest way to go about this using html/css?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bades View Post
    What's the easiest way to go about this using html/css?
    Tere are PHP ways, JS ways, and CSS ways. The CSS way is to have a special class on the body tag of each page. So, for example, class="contact" on the Contact page. Then you could give the Contact link in your menu a class of "contact" too.

    Then your CSS would look something like this:

    Code:
    nav a:hover, .contact nav a.contact {color: black; background: orange;}

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm tried it and it's not working...

    Maybe because I'm using a sprite as my hovers? Not sure

    http://badesdesign.com/dev_msf/index.php

    msf
    4321


    Thanks

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I do my navigation I'm a little unsure of what needs to be applied to an <li> vs an <a>.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I see you've added the bodyHome class to the home page so the rules you need would mimic the hover rules.

    e.g.
    Code:
    .homeBody .mainNav li.home a {
    background-image: url(http://badesdesign.com/dev_msf/images/hovers.png);    
    color: #252469;
    height: 45px;
    left: 0;
    padding-top: 3px;
    position: absolute;
    top: -1px;
    }
    You'll need to add classes to the body tag for the other menu items on the respective pages and merge them with the rules above.

    e.g.
    Code:
    .homeBody .mainNav li.home a,
    .loanBody .mainNav li.loan-production a,
    etc..
    etc..

  6. #6
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it! Thanks!

  7. #7
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I applied it to the Loan page and the sticky hover it not right...

  8. #8
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doing the same thing for recent financings and contact links.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You will have to set up exceptions for the items with longer widths.

    e.g.
    Code:
    .financeBody .mainNav li.recent-financings a { width: 173px}
    .loanBody .mainNav li.loan-production a { width:161px;}

  10. #10
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely - got it.


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
  •