A Pen by Jorge Epuñan.

index.jade

nav
  a(href="#") uno
  a(href="#" class="current") dos
  a(href="#") tres
  span

Lavalamp---CSS3.markdown

Lavalamp - CSS3

Lavalamp navigation menu with CSS3

A Pen by Jorge Epuñan on CodePen.

License.

script.js

var $btn = $('nav a');
var $class = 'current';
var $pointer = $('nav span');

if($btn.length) {
  
  $btn.on('click', function(e){
    e.preventDefault();
    $btn.removeClass($class);
    $(this).addClass($class);
  });
}

style.less

@base: 500px;
@primarycolor: #e74c3c;
@secondarycolor: #c0392b;
@textcolor: #ecf0f1;
@strongcolor: #9b59b6;

body {
  background-color: @primarycolor;
}
nav {
  margin: 50px auto;
  width: @base;
  height: @base/6;
  position: relative;
  overflow: hidden;
  font-size: 24px;
  
  a {
    display: inline-block;
    width: 33%;
    text-align: center;
    height: @base/6;
    line-height: @base/6;
    color: @textcolor;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: @primarycolor 1px 1px 1px;
    background-color: @secondarycolor;
    transition: .3s;
    
    &:hover,
    &.current{
      color: @strongcolor;
      text-shadow: none;
      background-color: white;
    }
    &.current {
      
      &:nth-of-type(1) ~ span {
        left: 0%
      }
      &:nth-of-type(2) ~ span {
        left: 33%
      }
      &:nth-of-type(3) ~ span {
        left: 66%
      }
    }
  }
  
  span {
      width: 33%;
      height: @base/100;
      display: block;
      position: absolute;
      top: 0;
      left: -33%;
      background-color: @strongcolor;
      transition: left .3s;
    }
}