Question

我一直在学习关于HTML，CSS和jQuery的一些东西来制作我的个人网站。

当我尝试添加更大的菜单时，我已经碰壁了，现在当我滚动它并没有显示所有内容时，我无法弄清楚原因。

解释问题的最佳方法，特别是因为我不知道大部分技术词汇，正在展示它： http://jsfiddle.net/jcml/kmxdo4ha/

   I don't know what part of the code should I paste to avoid pasting everything.

所以我发现了两个问题：

1 - 向上或向下滚动时不显示整个菜单（同时保持垂直居中 - 菜单会在导航时改变高度）

2 - menu.ico也会滚动，关闭菜单后可能会隐藏

编辑：我找出了问题＃1的原因，但菜单无法垂直居中。删除它：

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

Edit2 ：如果您进入菜单，完全向下滚动并关闭菜单，可以看到menu.ico div的问题。在您将鼠标悬停并向上滚动之前，菜单按钮不会显示条纹。

编辑3：我想我找到了解决问题＃2的方法，其中涉及更改所有网站结构。不管怎么说，这是一个很好的做法！

Answer 1

要解决您的第一个问题，您可以使用flexbox。你必须将你发现的样式替换成这样的问题：

.links ul{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
}

这是fiddle。

Answer 2

我不确定你对.ico的意思

但我确定如果您向菜单包装器添加一些padding-top: 20px;，并且可能有些padding-bottom: 20px;您的菜单不应被切断。

如果您没有菜单包装，只需在相关文本菜单项周围嵌入div。

.menunavwrapper { 
  width: 100%;
  height: 300px; // sample
  padding-top: 20px;
  padding-bottom: 20px;
}

HTML

<section class="menunavwrapper">
<!-- menu items, list items etc -->

<ul>
<li>sample</li>
</ul>

</section>

Answer 3

我能解决问题2。

基本上我必须更改div结构，以便其中一个滚动不会移动另一个。这就是原因。我最初设想了一个与之前的div结构不同的导航。

至于问题编号1，它是用原始帖子中的编辑编号1修复的，但是它出现了其他问题。导航未完成并不容易解释，我稍后会尝试修复它，如果我无法完成此操作，我会在稍后分享此问题。

无论如何，这是修复＃2的新版本： http://jsfiddle.net/jcml/bby7522h/

I don't know what part of the code should I paste to avoid pasting everything.

溢出和位置 - 滚动不会显示所有网页

3 个答案: