如何让这个汉堡抽屉菜单向右滑动？

Question

对于这个 codepen，如果我进行以下修改（用 'modify' 一词的注释表示），唯一发生的事情是汉堡包图标向右移动并从对（我想要）。

但我希望菜单内容也从右侧滑出。我错过了什么？

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  right: 15px; top: 15px;  /* modify from left: 15px to right: 15px*/
  z-index: 2;

  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  background-size: contain;
}

CSS 过渡效果：

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: right 0.2s;  /* modify left with right keyword */
}

.nav-trigger:checked + label {
  right: 215px; /* modify from left to right: 215px */
}

.nav-trigger:checked ~ .site-wrap {
  right: 200px; /* modify from left to right: 200px */
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

编辑："that happens is the hamburger icon moves to the right and slides from the right" - 我的意思是汉堡包图标位于右侧，当我单击它时，它会从右侧向左滑动。

Answer 1

这就是我相信你想要的。下次我建议将主框架的不透明度设置为 0.8 左右。这样做可以让您看到导航栏并相应地 fiddle。

我还建议使用 chrome inspect element 等开发人员工具，然后通过响应式操作系统修改 CSS 以进行快速调试。

Code Pen

    .navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 85%;
  z-index: 0;

  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

...

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  right: 15px; top: 15px;
  z-index: 2;

  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  background-size: contain;
}

...

.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

...

.nav-trigger:checked + label {
  right: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: -200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

Answer 2

使用负 right 值将 .navigation 菜单置于屏幕外，并在选中菜单时设置 right:0;。

（就像 lmgonzalves 建议的那样，将 .navigation HTML 移到菜单复选框之后，以便在选中菜单时允许使用 ~ 兄弟选择器）

代码笔：http://codepen.io/anon/pen/Nqydvp

Answer 3

一个可能的解决方案是将 .navigation 菜单放在 input 和 label 之后，例如：

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<ul class="navigation">
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">Portfolio</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item"><a href="#">Blog</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>
</ul>

然后在 CSS 中做这样的事情：

.navigation {
  left: -100%;
  transition: left 0.2s;
}

.nav-trigger:checked ~ .navigation {
  left: 0;
}

DEMO

如何让这个汉堡抽屉菜单向右滑动？

How to make this hamburger drawer menu slide to the right?

html

css

css-transitions