Underscore menu transition

Question

I have a menu with a lava lamp, as an underline, which looks like this:

Underline slides between links when you click on them. Try jsfiddle HERE .

My only problem is that if you click outside the menu, the underline will return to its original state (18%). But I want the underline to stay on the last clicked link when you go beyond the menu.

I tried :visitedbut does nothing.

Answer 1

CSS, . 3 JS (jQuery) :

$('.ph-line-nav').on('click', 'a', function() {
    $('.ph-line-nav a').removeClass('active');
    $(this).addClass('active');
});

nav a:nth-child(1).active ~ .effect {
    left: 18%;
    /* the middle of the first <a> */
}
nav a:nth-child(2).active ~ .effect {
    left: 43.5%;
    /* the middle of the second <a> */
}

jsFiddle: !

Answer 2

CSS, :target.

. . (IE9 +)

, , click css ( : target pseudo .