A Pen by Bennett Feely.

Centering-Navigation-Menu.markdown

Centering Navigation Menu

Clicked Items dynamically move to the center of the page by transitioning the other items to a width of 0. Plus a little touch using transforms and cubic-bezier easing.

Also see: http://codepen.io/bennettfeely/pen/eypxt

A Pen by Bennett Feely on CodePen.

License.

index.html

 <a>Home</a><a>Articles</a><a>Videos</a><a>Gallery</a><a>Contact</a>

script.js

$("a").click(function(){
    $(this).parent().addClass("full-page");
    $(this).addClass("clicked");
  
    setTimeout(function(){
     $(".full-page").removeClass("full-page");
      $("a").removeClass("clicked");  
    }, 1500);
  });

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Rambla:400,700,400italic);

$white : #F2F2F2;
$blue : #4285F4;
$black : #373737;

$size : 2rem;
$transition : .5s;
$transition-easing-function : cubic-bezier(.2,.7,.3,1.4);

body { background: #E7E6DD; }

html, body {
  position: relative;
  height: 100%;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}

a {
  display: inline-block;
  font: $size "Rambla";
  line-height: 1.5;
  color: $black;
  overflow: hidden;
  cursor: pointer;
  transition: $transition $transition-easing-function;
  width: 25%;
  border-bottom: medium solid transparent;
  user-select: none;
  
  &:hover,
  &.clicked {
    color: $blue;
    border-bottom: medium solid $blue;
    transition: $transition/1.5;
    transform: translate3d(0,-5%,0)
  }
  &:active {
    transform: scale3d(.9,.9,.9);
    opacity: .8;
    transition: 0;
  }
  
  &.clicked {
    transform: scale3d(1.25,1.25,1.25);
    transform-origin: center bottom;
  }
}

.full-page a:not(.clicked) {
  width: 0;
  transform: scale3d(0.01,0.01,0.01);
}

.scale a.clicked {
  transform: scale3d(1.3,1.3,1.3);    
}