Question

假设我有一个水平滑动菜单，可以在浏览器窗口的左侧对齐和隐藏之间切换：

Open (has class "open")     Closed (class "open" removed)
+------+--------------+     +---------------------+
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
+------+--------------+     +---------------------+

SCSS：

header nav[role="navigation"] {
    background: $primary-colour;
    bottom: 0;
    left: -282px;
    position: absolute;
    top: 0;
    width: 282px;
    @include transition(left 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000));
    &.open {
        left: 0;
    }
}

现在让我说我想要一个切换按钮：1）当菜单关闭时位于窗口左侧，2）位于菜单内部，当它打开时对齐右侧：

Open                        Closed
+--+---+--------------+     +---+-----------------+
|  | x |              |     | = |                 |
|  +---+              |     +---+                 |
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
+------+--------------+     +---------------------+

此外，它应该遵循菜单的过渡，以便它在右侧与菜单的可见宽度与按钮宽度相匹配的位置对齐。有没有办法单独使用CSS实现这一目标？

Answer 1

通过一点CSS摇摆，我想出了一个解决方案：

// Some JS to illustrate the animation
$('.nav-toggle').click(function() {
  $('.nav').toggleClass('open');
});

.window {
  background: lightgrey;
  display: block;
  height: 200px;
  margin: 0 0 10px;
  overflow-x: hidden;
  position: relative;
  width: 400px;
}
.nav {
  background: blue;
  bottom: 0;
  position: absolute;
  top: 0;
  width: 0;
  -webkit-transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
  -moz-transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
  -ms-transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
  -o-transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
  transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.nav.open {
  width: 80px;
}
.nav-toggle-wrapper {
  height: 40px;
  float: left;
  min-width: 40px;
  width: 100%;
}
.nav-toggle {
  background: red;
  height: 40px;
  float: right;
  width: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="window">
  <div class="nav">
    <div class="nav-toggle-wrapper">
      <div class="nav-toggle"></div>
    </div>
  </div>
</div>

另外，请参阅jsfiddle＆gt;上的示例link

将子项显示在其屏幕外父项之外，直到父项显示为足够宽

1 个答案: