Menu animation and hover state - simple jQuery solution (LavaLamp menu's idea)

Question

I'm having the following issue with a primary site navigation menu. I have already reviewed some questions the editor suggets when asking the quetion, but none are the thing I'm looking for... I'm really sorry for making such a specific question.

The DEMO: http://jsfiddle.net/fYq6k/1/

EXPLANATION: the menu must have the current selected. BUT when you hover another #menu li a the current status must go away and appear on the hovered element. When hover is out, if there has been no click, the current status must return to the real current #menu li a

Note:

• it should be a solution based on as much CSS as possible and as less jQuery as posible. But I do understand the jQuery is necessary

• transition on the fiddle must be respected

• if it doesn't mean a butload of extra code, I'd like it to work with focus state also

You're great guys, thanks a lot in advance for any help!

Here's the code I made my self, of course, not working...

$(function(){
  $('#menu li a').hover(
    function() {
      $(this).addClass('current');
    },
    function() {  
      $(this).removeClass('current');
    }
  );
});

The CSS:

#menu {
  display: inline-block;
  position: relative;
}

#menu li {
  display: inline-block;
  float: left;
}

#menu li a {
  display: block;
  padding: 46px 11px 0;
  border-top: 9px solid #7d7c7c;
  font: normal 15px/1em Arial, sans-serif;
  color: #6a6868;
  text-transform: uppercase;
  text-decoration: none;

  transition: all .3s ease;
}

#menu li a.current, #menu li a:hover {
  padding: 38px 11px 0;
  border-top: 17px solid #e30613;
}

HTML (tipicall, valid HTML5 menu):

<header>
    <nav>
      <ul id="menu" class="clearfix">
        <li><a class="current" href="#">La Agencia</a></li>
        <li><a href="#">Que Hacemos</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
      <div class="clear"></div>
    </nav>
</header>

Answer 1

you can add one extra class 'real' like this

$(function(){
    $('#menu li a').hover(function(){
      $('.current').removeClass('current').addClass("real");
    },function(){
      $('.real').removeClass('real').addClass("current");   
    }
    );
});    

and remove the 'real' class to return to current http://jsfiddle.net/fYq6k/2/
UPDATE
to work with focus

$(function(){
    $('.current').addClass("real");
    $('#menu li a').hover(function(){
          $('.current').removeClass('current');
        },function(){
          $('.current').removeClass('current');
          $('.real').addClass("current");   
        }
    ).focus(function(){
          $('.current').removeClass('current');
          $(this).addClass("current");
    }).blur(function(){
         $('.current').removeClass("current");
         $('.real').addClass("current"); 
    });
});    

you need to do the same on the events focus and blur http://jsfiddle.net/fYq6k/5/
fix the bug using focus
to fix the flickering i add one empty div to every "li a" and animate that div instead of the border and padding
HTML

<ul id="menu" class="clearfix">
    <li><a class="current" href="#"><div></div>La Agencia</a></li>
    <li><a href="#"><div></div>Que Hacemos</a></li>
    <li><a href="#"><div></div>Portfolio</a></li>
    <li><a href="#"><div></div>Contacto</a></li>
</ul>    

CSS

#menu li a div{
    height:9px;
    background:#7d7c7c;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    transition: all .3s ease;
}
#menu li a.current div{
  height: 17px;
  background:#e30613;
}

http://jsfiddle.net/fYq6k/6/

Answer 2

I found this example page: http://www.script-tutorials.com/demos/249/index.html In it, the selection returns to the "home" when the mouse is not hovering over the menu. There's also a tutorial for it. It does not contain any javascript I think.