更改位置后调整宽度

Question

我正在尝试通过更改 main 元素的左侧值来创建滑动菜单效果。我需要它来调整大小以填充通过向左移动创建的剩余空间。我尝试添加width: 100%，但似乎没有任何区别。位置变化的行为如我所愿，但我也无法让元素正确调整大小。这是我目前所拥有的

<div>
    <!-- Nav Here -->
</div>
<main>
    <!-- Content Here -->
</main>

main {
  position: relative;
  z-index: 10;
  width: 100%;
  transition: 0.2s;
  left: 0;
}

main:hover {
  left: -5rem;
}

Answer 1

所以有几种方法可以解决这个问题，但没有规则。 1 是width: 100% 几乎总是一个坏主意。大多数情况下它不会起作用，同时可能会无意中搞砸一些事情。

解决方案：

所以解决方案 1. 可能是最简单的一个，看起来像这样：

#main {
  position: fixed;
  min-width: 100px;
  min-height: 200px;
  right: -85px;
  top: 10px;
  padding: 10px;
  background: #50505050;
  transition: all 0.2s;
  z-index: 99;
}

#main:hover {
  right: 10px;

}

<div class="container">
<div id="nav">
  <!-- regular old content -->
  <p>Hello world!</p>
</div>
<div id="main">
  <!-- this slides out -->
  <p>slide to the left</p> 
</div>
</div>

它的工作原理是，它不是调整滑动菜单的大小，而是具有（半）固定大小，并从部分视图之外的位置开始。
hen，一旦你将鼠标悬停在它上面，整个元素就会向左移动，使其完全滑入视野。

此解决方案的优点在于滑动菜单与页面的其余部分完全无关，这使其易于维护。更改 nav 中的内容不会破坏 main¹ 中的内容。

有关此实现的更详细说明，您可以查看this example。

第二个实现有点棘手，涉及到 flexbox：

.container {
  display: flex;
  flex-direction: row;
  justify-content: right;
  flex-basis: 100px;
  
  /* not needed when you have content */
  min-height: 250px;
}

#nav {
  flex-grow: 1;
  justify-content: left;
}

#main {
 flex-shrink: 1;
 z-index: 99;
 background: #50505050;
 transition: all 0.2s;
 padding: 0 0 0 10px;
 overflow: hidden;
}

#main:hover {
 flex-grow: 2;

}

<div class="container">

<div id="nav">
<!-- regular old content -->
<p>Hello world</p>
</div>

<div id="main">
<!-- This is the sliding part -->
<p>Expands left</p>
</div>
</div>

如您所见，此实现确实调整大小，并且菜单更像是一种扩展而不是滑动菜单。

可以在 here 和 here 找到更完整的 flexbox 解释，但非常简单，菜单默认占用可用空间的 1/3，但是当悬停在上面时会扩大到 2/3可用空间。您可以通过分配不同的 flex-grow 和 flex-shrink 值来操纵它。

这种方法的优点是它与大小无关，flex 会为您完成所有计算，因此您不必像第一个解决方案那样担心手动设置正确和大小值。我还发现这看起来比旧的幻灯片菜单更现代一点，但是您当然可以通过足够的工作使任何东西看起来不错。

缺点是 flexbox 是 CSS 的黑魔法，很难掌握。

希望其中任何一个都可以帮助您创建所需的内容，但除此之外，您还可以找到大量其他资源和教程。

脚注：

1：我强烈建议你顺便把#main 和#nav 的id 调换一下。 #main 应该是您的主要内容所在的位置，#nav 是用于站点导航的。