relative scaled navigationbar with moving box
<p>I want to create a nice looking navigation(relative scale) with a box, that moves smooth between the navigation points. So if I select a navigation point the box moves smooth to the selected entry point. But I don`t know how to do that.</p>

<p>here is a example for the smooth animation:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var boxOne = document.getElementsByClassName('box')[0],
    $boxTwo = $('.box:eq(1)');

document.getElementsByClassName('toggleButton')[0].onclick = function() {
  if(this.innerHTML === 'Play') 
  { 
    this.innerHTML = 'Pause';
    boxOne.classList.add('horizTranslate');
  } else {
    this.innerHTML = 'Play';
    var computedStyle = window.getComputedStyle(boxOne),
        marginLeft = computedStyle.getPropertyValue('margin-left');
    boxOne.style.marginLeft = marginLeft;
    boxOne.classList.remove('horizTranslate');    
  }  
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
  margin: 30px;
  height: 50px;
  width: 50px;
  background-color: blue;
}
.box.horizTranslate {
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
  margin-left: 50% !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html &gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Pausing Transitions&lt;/title&gt;
  
  
  
      &lt;link rel="stylesheet" href="css/style.css"&gt;

  
&lt;/head&gt;

&lt;body&gt;
  &lt;h3&gt;Example&lt;/h3&gt;
&lt;div class='box'&gt;&lt;/div&gt; 
&lt;button class='toggleButton' value='play'&gt;Play&lt;/button&gt;

  &lt;script src='http://code.jquery.com/jquery-2.0.0.js'&gt;&lt;/script&gt;

    &lt;script src="js/index.js"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Currently my Code looks like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face { 
font-family: "FireSans"; 
src: url("../fonts/FiraSans-Light.ttf"); 
}

body{

 background-color: green;

}

#header{
 
 width: 80%;
 max-width: 1300px;
 min-width: 900px;
    margin: 50px auto;

}

#table{

 width: 100%

}

#logo{

 height: 170px;
 
 display: block;
 margin: 0 auto; 

}

#menu{

 padding-top: 75px;
 
 color: white;
 font-family: "FireSans";
 font-size: 1.5em;
 
 width: 280px;
 
}

#menutable{

 width: 280px;

}

#test {

 height: 4px;
 width: 85%;
 background-color: rgb(185,224,78);
 margin: auto;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="header"&gt;
 
 &lt;table id="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
         &lt;th id="menu" align="right"&gt;&lt;table id="menutable"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th id="start"&gt;STARTSEITE&lt;div id="test"&gt;&lt;/th&gt;&lt;th id="ende"onmouseover="changeBox()"&gt;KANÄLE&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;/table&gt;&lt;/th&gt;
        &lt;th style="width:344px;"&gt;&lt;img id="logo" src="./images/logo.jpg"&gt;&lt;/th&gt;
         &lt;th id="menu" align="left"&gt;&lt;table id="menutable"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;BEWERBEN&lt;/th&gt;&lt;th&gt;LOGIN&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;/table&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
 &lt;/table&gt;

 &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks for your help :)</p>