有没有办法创建垂直滚动菜单,当您点击链接时,整个菜单会向上或向下移动?这很难解释。我能找到的最好的例子就是旧的xbox nxe仪表板。
http://www.youtube.com/watch?v=Q2PyNpbteuU
如果您的链接是(主页 - 关于 - 联系)并且您点击联系人;该链接现在将在列表中居中,并且将在顶部和主页下方。
主页
关于
联系(比您点击联系人)
-
关于
与
主页(现在看起来像这样)
-
这可能吗?使用HTML5? CSS?的Javascript?
答案 0 :(得分:0)
在这里,您将找到我使用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);
});