Question

我正在努力制作这样的固定式菜单：

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

除了我希望水平定位更灵活。

我知道我可以在“正确：”而不是常量中使用百分比值，但我希望菜单能够紧贴中心博客布局作为侧边栏，这意味着当页面调整大小时，侧边栏不应涵盖内容。同样，如果我将页面放大，框不应该从内容中散开。

任何方式只用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/

“Pinned-down”菜单，具有灵活的水平位置

1 个答案: