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>

Abraham Uribe · Accepted Answer · 2013-07-30T18:40:02.320

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/

Awesome! Cannot believe it! Wordked like a charm! Now that you are on it... you'll notice that if you hover fast, the text flickers. That's because the effect is achieved when less top padding is applied and a mayor top border is applied, SO I guess that the effect calculation is perfect when hover effect is completely achieved BUT when you iterrupt it, the text goes down and up (kind of flickers)... I don't believe any client will actually do somthing like that, but if I can avoid it, the better! If you have any suggestions on how to do re-do it an achieve perfection... welcome! Thanks a lot! — Santiago Baigorria, Jul 30 '13 at 17:17

score 0 · Answer 2 · answered Jul 30 '13 at 16:27

0

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.

answered Jul 30 '13 at 16:27

Dragongeek

263
1
5
23

Thanks a lot, but I've already seen this and it is not what I need. – Santiago Baigorria Jul 30 '13 at 16:29

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

2 Answers2