JavaScript中的垂直滚动菜单

有没有办法创建一个垂直滚动菜单，当你点击一个链接时，整个菜单会向上或向下移动？这真的很难解释。我能找到的最好的例子就是旧的xbox nxe仪表板

如果您的链接是（HOME-ABOUT-CONTACT），并且您单击了CONTACT；该链接现在将在列表中居中，并且“关于”将位于顶部，而“主”将位于底部

家

关于

联系人（然后单击联系人）

-

关于

联系方式

家（现在看起来像这样）

-

---

这可能吗？使用HTML5？CSS？Javascript？

在这里，您将看到我使用jquery实现的水平和垂直实现：

垂直菜单的HTML代码：

<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>

而JS：

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('click', 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);
  });

---

是的，这是可能的。我在这里创建了第一个Kinect仪表板的模型-使用jQuery。在哪里可以找到这样做的图坦卡蒙？或者如果你能告诉我怎么做？哪儿都找不到。我不能告诉你怎么做。你试过什么？

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('click', 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);
  });