Enabled is the original state of button or tab. It is click-able as opposed to disabled.

I'm the one confused trying to do this!

1st YES - a - for any general styling when left alone and unclicked
2nd YES - a:hover - for any cursor interaction
3rd Maybe - a:active - if the button has just been clicked?

I also want the active state for the current / selected state. The button would remain on "3rd" until clicking on a different link/button.

Still clear as mud?
Thanks,
Laurie

I think she wants the "Enabled" to be 'currently selected'...? So a highlighted link to indicate that they're on that particular page. (different color than the rest, even when the mouse goes away).

a:active is on mouse press and hold, so that's not really accomplishing what she wants.

You can set a class="current" on your anchor of the page you are on, if you want to do it manually per page, but my favorite is to do jquery url string matching to set the class on the anchor, that way it's dynamic per page.

Am I wrong? Hopefully I helped. If you want the jquery solution let me know, i'll paste it in here :)

~ Chris

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script&gt;
<script type="text/javascript">
//Page Highlighting
var url = window.location.toString()
$(document).ready(function(){
  $('nav li a').each(function(){
    var myHref= $(this).attr('href');
    if( url.match( myHref )){
      $(this).addClass('current');
    }
  });
});
</script>

Including the above will get you started (including the Jquery library).

It matches the url string to the href that's in the anchor:

http://mywebsite.com/about.html
would match

<a href="about.html" class="about">About</a>

Then Just rename 'nav li a' to the id or class that you have your navigation set up as, and make sure you keep the anchor 'a' at the end, example: #mynavigation a

Since you're using a sprite, name each anchor with a class, example: class="about", then in CSS for it's current state write: a.about.current{} to specifically target that anchor and add your sprite styles for it.

It sounds a bit complicated, but all in all not that bad, you end up with a navigation like so:

<nav>
  <ul>
    <li><a href="/" class="home">Home</a></li>
    <li><a href="/about.html" class="about">About</a></li>
    <li><a href="/services.html" class="services">Services</a></li>
    <li><a href="/portfolio.html" class="portfolio">Portfolio</a></li>
    <li><a href="/contact.html" class="contact">Contact</a></li>
  </ul>
</nav>

Also, if you don't care about supporting IE6/7/8 then using :nth-child in your CSS to select the nav item to style instead of using specific class names on each anchor is definitely better, so for About it would be: nav li:nth-child(2) a.current{}

Hope all of this helps you! (there are other technologies that can do this too, like PHP, ColdFusion, ASP, ect, but Jquery's the easiest way to start!)

~ Chris

Hello guys!
It's still a work in progress, but check it out if you like - LMahoney.com

My top nav still has movement issues but I'm getting there.

Thanks again for all your comments.
Laurie

http://www.smushit.com/ysmush.it/