垂直滾動菜單

有沒有什麼辦法可以創建一個垂直滾動菜單，當你點擊一個鏈接時，整個菜單會向上或向下移動？它很難解釋。我可以找到我想要做的最好的例子是舊的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

垂直滾動菜單

回答

相關問題