Question

我一直在学习关于HTML，CSS和jQuery的一些东西来制作我的个人网站。到目前为止，我能够解决我遇到的大多数问题，其中一些问题得到了这里人们的宝贵帮助。谢谢！

这是当前的代码： http://jsfiddle.net/jcml/1eyz2z6g/

我注意到一个问题：

如果我尝试使用此代码垂直居中菜单，将类“center”添加到div类“links”，我会得到一个奇怪的行为。从这里可以看出： http://jsfiddle.net/jcml/Lz4bq7mv/

.center ul {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

1-如何在这种情况下垂直居中菜单？

我也注意到了一些东西，当我在手机中使用网站时，当我点击任何链接“Bla”时，一个大框显示选择所有子菜单（父链接和兄弟blas）

2-有没有办法改变这种行为？

此外：

3-有没有办法为colapsing和扩展添加动画时间？

由于

Answer 1

我搜索过并发现了不同的解决方案，但是这个yuk发布了。结果如下：

http://jsfiddle.net/jcml/rm5bhrm8/1

我创建了一个容器类：

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}

并将其添加到链接类：

display: table-cell;
vertical-align: middle;

并更改了在每个链接类之前添加div容器类的结构。

以垂直折叠菜单为中心

1 个答案: