垂直滚动菜单

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

http://www.youtube.com/watch?v=Q2PyNpbteuU

在哪里，如果你的链接是（HOME - 关于我们 - 联系）并单击联系人;该链接现在将集中在列表中，并且将位于顶部和下方的家中。

首页

关于

联系（比你点击联系人）

关于

联系

首页（现在它应该是这样的）

这可能吗？使用HTML5？ CSS？ JavaScript的？或者我将不得不使用像闪光灯的东西？（我宁愿从闪存远离）

来源

2013-01-14 Allan

是的，这是可能的。我在这里创建了第一个Kinect仪表板的模拟 - 使用jQuery的http://www.yourgamercard.net。 –

在哪里我可以找到一个啧啧，做到这一点？或者如果你能告诉我如何？无法找到任何地方。 – Allan

我不能只告诉你如何去做。你有什么尝试？ –

在这里，你会发现一个水平和垂直的实现我用jQuery做的：

http://codepen.io/rafaelcastrocouto/pen/kuAzl

垂直菜单的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>

的CSS：

#vmenu { 
    border: 1px solid green; 
    overflow: hidden; 
    position: relative; 
    padding: 5%; 
} 
#vmenu section { 
    position: relative; 
    margin-top: 10%; 
    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; 
}

而且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); 
    });

来源

2013-08-19 18:00:19 rafaelcastrocouto

垂直滚动菜单

回答

相关问题