“固定”具有灵活水平位置的菜单

Question

我正在尝试制作一个像这样的固定样式菜单：

http://www.w3。 org/Style/Examples/007/menus

但我希望水平定位更加灵活。

我知道我可以在“right:”中使用百分比值而不是常量，但我希望菜单能够作为侧边栏紧贴在居中的博客布局中，这意味着当调整页面大小时，侧边栏应该“ t 覆盖内容。同样，如果我使页面更大，该框不应该远离内容。

有什么方法可以只使用 css 来做到这一点吗？如果没有，也许有一个简单的 JavaScript 解决方案？

Answer 1

以下是使用一些通用代码执行此操作的一种方法：

HTML：

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

CSS：

在容器和内容上设置显式宽度，为容器中的侧边栏留出空间。将容器水平居中。

#container {
  width: 200px;
  margin: 0 auto;
}

#content {
  width: 150px;
}

现在我们要position:fix侧边栏相对于页面的中心而不是相对于页面的右边缘。将其设置为容器中剩余空间的宽度，并给它一个 margin-left （或 padding-left），具体取决于您可能想用它做的其他事情) 等于内容的宽度。然后将 right: 50% （对于右侧边栏，将这些值切换为 left 对于左侧边栏）并将 margin-right 设置为负二分之一容器宽度：

#sidebar {
  width: 50px;
  margin-left: 150px;
  position: fixed;
  right: 50%;
  margin-right: -100px;
  /* other styles such as "top", etc. */
}

调整窗口大小，使其紧贴内容并垂直放置在任何位置。

这是一个小提琴（为了视觉清晰度有一些额外的样式）： http://jsfiddle.net/blineberry/UkEkS/< /a>