如何通过向上/向下滑动标题来降低所有元素？

Question

当用户将鼠标悬停在标题元素上时，我使用CSS来关闭标题元素。是否有可能还要删除页面的其余部分，以使标题完全没有重叠？怎么会这样做？

标题示例：http://dev.handyvet.org/VetProsDevSite/_MASTER/views/vetpro%20users/vet_pro_registration_3.html

谢谢！

Answer 1

您可以移动整个页面而不是标题。将页面的负上边距设置为默认值，并在需要时减小其值

Answer 2

你只需要使用nav div的高度，如下所示：

nav {
  width: 100%;
  height: 50px;
  background: #000;
  color: #fff;
}

.active {
  height: 200px;
}

我让你成为一个非常简单的小提琴：http://jsfiddle.net/rnc8L53L/

按下按钮时，我使用jQuery在导航栏上切换 .active 类。 .active类会覆盖“height：50px”规则，这是nav类的初始状态。

这只是一个非常简单的例子。它也可以使用Javascript完成，但事件处理稍微复杂一些。希望它有所帮助。