4

假设我在浏览器窗口中有一个正确的菜单：

___________________________
                   | Right |
        content    | Menu  |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
___________________|_______|

我希望修复菜单，以便用户在向下滚动时看到相同的内容。所以我为右边的菜单设置了位置：固定。

但是，如果窗口太小，我也希望菜单不可见。即窗口应该在右菜单之前显示全部内容。

像这样：

_________________________
                   | Ri |
        content    | Me |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
___________________|____|

有没有办法在纯 CSS 中做到这一点？如果没有，一个非常简单的 js 修复？

编辑：

我有一个相关的问题，所以我觉得不需要创建另一个问题：

我有一个固定的右侧菜单宽度，但我需要左侧内容来相应地自动调整其宽度（填充左侧）。有没有办法在 css 中做到这一点并保留上述功能？

4

3 回答 3

2

如果您知道内容的尺寸，则可以改用以下内容：

position:fixed; left:800px;

而不是：

position:fixed; right:0;

如果说您的内容是 800px 宽。这意味着您的计算是从左侧进行的，如果用户窗口小于该菜单，菜单将退出屏幕。

更新

看来您的要求如下：

  • 您有一个指定了最小宽度的内容区域。
  • 您需要您的菜单与用户一起滚动。
  • 您需要将菜单显示在右侧，直到菜单占用内容的最小宽度。

我建议使用 JavaScript 来解决这个问题，你可以在纯 CSS 中实现它，但通过将菜单放置在覆盖整个页面的固定层中。虽然这里的逻辑在现代浏览器中有效——由于 z-indexing 菜单容器上方的内容——我不想看到旧的用户代理会怎么做：

纯css版本

css

/* make sure our content doesn't collapse too small */
.content { 
  position: relative;
  z-index: 20;
  min-width: 700px;
  margin-right: 200px;
}
/* place our menu container across the entire page */
.menu-container {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* a layer that mimics what our content does */
.menu-offset  {
  position: relative;
  min-width: 700px;
  margin-right: 200px;
  height: 100%;
}
/* finally the menu attached to the right of the menu offset */
.menu-content { 
  position: absolute;
  width: 200px;
  height: 100%; 
  left: 100%;
  background: #ddd;
}

标记

<div class="content">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
  adipiscing magna sed ipsum convallis vel fringilla nibh viverra.
  Nulla et ligula vel urna scelerisque imperdiet a et lectus.
  Nunc commodo, nibh id blandit mollis, leo quam eleifend urna,
  at rhoncus turpis justo sit amet erat. Quisque tempus nunc 
  vitae eros fringilla eget imperdiet neque tincidunt. Donec 
  ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut, 
  auctor in dolor. Nullam lobortis condimentum consequat. 
  </p>
  <p>
  Maecenas at orci massa, quis congue mauris. Vivamus varius 
  tincidunt nunc, eget <a href="#canyouclickthis">pellentesque arcu 
  faucibus</a> ac. Suspendisse rhoncus orci eu felis consectetur 
  rutrum. Nullam sed mauris eros. Nunc dignissim, libero dapibus 
  consectetur lobortis, ante urna faucibus dui, vel luctus metus 
  leo id magna. Pellentesque mi ligula, commodo ac pellentesque 
  et, auctor sed neque. Phasellus dapibus tellus faucibus dui 
  vehicula hendrerit. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada 
  fames ac turpis egestas.
  </p>
</div>
<div class="menu-container">
  <div class="menu-offset">
    <nav class="menu-content">Menu</nav>
  </div>
</div>

有了上述内容，我希望旧版浏览器要么呈现，因此您将无法与内容 div 中的任何内容进行交互——请参阅#canyouclickthis链接——或者position:fixed无论如何都不能正确支持：

http://caniuse.com/css-fixed

更新 2

啊，刚刚发现你关于80%宽度的评论。对上述内容的修改可能适用于此，但是，当您有一个固定宽度的菜单时（尤其是在您指定的条件下），最好避免使用百分比宽度，并改用 min 和 max-width。要么使用具有百分比宽度而不是固定的菜单。

根据您拥有/希望设置标记的方式，以下可能有效。这种方法依赖于这样一个事实，即如果您不指定left, top，bottom或者right图层应该保留在它所在的位置（在旧浏览器中不是 100% 正确）。您可能会发现您必须.menu为不太现代的 UA 定义层的尺寸。该解决方案的另一个好处是不覆盖固定层中的整个页面:)

.content        { position:relative; width:80%; min-width: 800px; float:left; }
.menu-container { position:absolute; left:100%; top:0; }
.menu-content   { position: fixed; width:20%; height:100%; background:#ddd; }

<div class="content">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
  adipiscing magna sed ipsum convallis vel fringilla nibh viverra.
  Nulla et ligula vel urna scelerisque imperdiet a et lectus.
  Nunc commodo, nibh id blandit mollis, leo quam eleifend urna,
  at rhoncus turpis justo sit amet erat. Quisque tempus nunc 
  vitae eros fringilla eget imperdiet neque tincidunt. Donec 
  ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut, 
  auctor in dolor. Nullam lobortis condimentum consequat. 
  </p>
  <div class="menu-container">
    <nav class="menu-content">Menu</nav>
  </div>
</div>

同样，最好在 Internet Explorer 中测试它，因为我无法访问那个特定的用户代理 atm。

于 2013-04-25T00:03:19.327 回答
1

对于问题的第二部分，给content元素一个margin-right或padding-right等于菜单宽度

所以

.menu{
   position:fixed;
   top:0;
   bottom:0;
   right:0;
   width: 240px; /*the fixed width you want*/
}

.content{ /*assuming there is a wrapper element*/
   margin-right:240px; /*same as fixed width of menu*/
}

演示在http://jsfiddle.net/gaby/MMnhZ/

于 2013-04-25T00:39:36.863 回答
1

使用 jQuery，您可以计算窗口的宽度和内容的宽度，然后将其分配给菜单的左侧值。

var leftPosition = ($('#wrapper').width() / 2 ) + ($(window).width() / 2);

$('#menu').css("left", leftPosition);

使用 $(window).resize(); 如果窗口发生变化，则重新计算它。添加 if/else 语句以确保它保持在一定数量之上并且您已设置好。

这是一个显示结果的 jsFiddle

于 2013-04-25T00:44:05.717 回答