Question

没有javascript的帮助，这可能吗？

通常我们在页面顶部有菜单栏 - 我们将它们设置为body的子项，然后绝对定位它们，例如top: 10px; right: 10px;。

如果我们想要实现相同的目标，而不是作为页面下方的上下文菜单，该怎么办？

我已经开始提出一个小提示 - 这里没有定位，我们只有默认的overflow: visible。

我无法绝对定位它，因为我不知道x，y，因为它之前的内容具有动态特性。

我能想到的唯一方法是沿着顶部导航栏的传统路线走下去，用javascript找到它的容器的x，y并将其定位在那里。但是，我需要管理它，如果它之前的内容发生变化，那么它的位置也需要改变。

有没有人知道“坚持”jquery方法。或者甚至用纯css更好地实现它？

由于

这是我的粗俗小提琴 - 点击“一个”http://jsfiddle.net/hHR23/1/

Answer 1

我想你想要这个，但我不确定你的描述：

http://jsfiddle.net/samih/hHR23/2/

请注意：

.section {
    height: 58px;
    background-color: yellow;
    position: relative;
}

而且：

.menu {
    position: absolute;

}

现在您的菜单将跟随“动态”页面，因为绝对位置相对于“position：relative”容器。

Answer 2

另一种方法 - Fiddle。

HTML

<div class='header'>Header</div>
<div class='floatingmenu'>
  <ul class="menu">
    <li>One
      <ul class="sub-menu">
                <li>one a</li>
                <li>one b</li>
                <li>one c</li>
                <li>one d</li>
                <li>one e</li>
                <li>one f</li>
                <li>one g</li>
      </ul>
   </li>
   <li>Two</li>
   <li>Three</li>
   </ul>
</div>

CSS

 .header {
    height: 40px;
    background-color: blue;
}
.floatingmenu {
    width: 30%;
    height: 30%;
    background-color: green;
    color: white;
    border: 10px solid white;
    border-radius: 10px;
    margin: 20px auto;
}
.footer  {
    height: 200px;
    background-color: yellow;
}

如何在屏幕中间有一个浮动菜单

2 个答案: