Scrolling menu

index.html

<!-- HORIZONTAL -->
<nav id="hmenu">
  <section>
    <div class="active"><a>First</a></div>
    <div><a>Second</a></div>
    <div><a>One more</a></div>
    <div><a>XBox</a></div>
    <div><a>Menu</a></div>
    <div><a>Last</a></div>
  </section>
</nav>
<!-- VERTICAL -->
<nav id="vmenu">
  <section>
    <div class="active"><a>First</a></div>
    <div><a>Second</a></div>
    <div><a>One more</a></div>
    <div><a>XBox</a></div>
    <div><a>Menu</a></div>
    <div><a>Last</a></div>
  </section>
</nav>

script.js

$(function(){
  //HORIZONTAL
  var size = 200;
  var count = $('#hmenu section').get(0).children.length;
  $('#hmenu').height(size);
  $('#hmenu section').width(size * count);
  $('#hmenu section div')
  .height(size).width(size)
  .on('mouseover', function(){
    $('#hmenu section div').removeClass('active')
    $(this).addClass('active');
    var c = this.parentNode.children;
    var i = Array.prototype.indexOf.call(c, this);
    $('#hmenu section').css('left', i * size * -1);
  });
  //VERTICAL
  var size = 200;
  var count = $('#vmenu section').get(0).children.length;
  $('#vmenu')
  .height(2 * size).width(size);  
  $('#vmenu section').height(size * count);
  $('#vmenu section div')
  .height(size).width(size)
  .on('mouseover', function(){
    $('#vmenu section div').removeClass('active')
    $(this).addClass('active');
    var c = this.parentNode.children;
    var i = Array.prototype.indexOf.call(c, this);
    $('#vmenu section').css('top', i * size * -1);
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

scrolling-menu.markdown

Scrolling menu

A Pen by Hatem Hosny on CodePen.

License.

style.css

/*HORIZONTAL*/
nav {
  float: left;
  margin-bottom: 1em;
}
#hmenu {
  border: 1px solid red;
  width: 90%; 
  overflow: hidden;
  position: relative;
  padding: 5%;
}
#hmenu section {
  position: relative;
  margin-left: 30%;
  transition: left 0.5s;
}
#hmenu section div {
  float: left;
  display: inline-block;
  padding: 0; margin: 0;
  transform: scale(1);
  transition: transform 0.5s;
}
#hmenu section div.active { 
  transform: scale(1.2);
}
#hmenu section div a {
  text-align: center;
  background: #ddd;
  box-shadow: 0 0 1em #444;
  border-radius: 1em;
  display: block;
  width: 60%; height: 60%;
  padding: 10%;
  margin: 10%;
}
#hmenu section div.active a { 
  background: #ccc;
  box-shadow: 0 0 1em;  
}
/*VERTICAL*/
#vmenu {
  border: 1px solid green;
  overflow: hidden;
  position: relative;
  padding: 5%;
}
#vmenu section {
  position: relative;
  margin-top: 30%;
  transition: top 0.5s;
}
#vmenu section div {
  float: left;
  display: inline-block;
  padding: 0; margin: 0;
  transform: scale(1);
  transition: transform 0.5s;
}
#vmenu section div.active { 
  transform: scale(1.2);
}
#vmenu section div a {
  text-align: center;
  background: #ddd;
  box-shadow: 0 0 1em #444;
  border-radius: 1em;
  display: block;
  width: 60%; height: 60%;
  padding: 10%;
  margin: 10%;
}
#vmenu section div.active a { 
  background: #ccc;
  box-shadow: 0 0 1em;  
}