Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts

    CSS Hover Menu - How to keep one button highlighted?

    I implemented a horizontal menu from listamatic, but I want to keep one of the options highlighted when you are on that specific page. So for instance, when you click on about us, the rest of the options are still white background, but the about us, would be no longer clickable, and the orange background would show.

    http://www.nebrad.org/about.html

    I've been looking around, but haven't been able to find how to do this?

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Set a class for that one link, i(e: current) and style it to make the on:hover condition the same as the link state. The link state for the class would be the same as the hover which happened originally. Follow that?

    Also, remove the <a></a> from that item so it can't be clicked.

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    so would I have something like this:

    <li id="active"><p class="current">About Us</p></li>

    and then in my stylesheet have:

    p.current {
    same stuff as the hover li?
    }

    Like that?

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    should be good.

    If that gives you trouble add #active in front of it, perhaps.

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ok I got it to stay highlighted,

    http://www.nebrad.org/about.html

    But when you rollover the item next to it, the background color doesn't connect with the highlighted one. I messed with the padding, and margin, but couldn't get them to connect without that white space. Any ideas?

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    It looks more like a "tab" with the white space there. I would leave it in for that reason. I have a site where they join-up and I want to alter it to what you have, so I vote leave it there.

    (I can't find the fix, either...)


  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ok, I'll just leave it for now....

    Thanks for your help. Oh, do you have any CSS books that you would recommend for a handy reference?

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    There is a gal from Austin , Tx, (I think), that wrote a pretty fair book.

    Virginia DeBolt, Integrated HTML and CSS, Sybex Publishing.

    She teaches at a College down there someplace.

    *edit*

    Wrong State... another thread had a Texas page on it, sorry, you Americans all look the same


  •  

    Posting Permissions

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