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

Question

对于这个 codepen ，如果我进行以下修改（在单词“修改”处用注释表示），唯一发生的事情就是汉堡图标向右移动并从右侧滑出（这正是我想要的）。

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

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);
}

编辑： "这种情况发生时，汉堡图标会向右移动并从右侧滑动" - 我的意思是汉堡图标位于右侧，当我点击它时，会从右侧向左滑动。

- Nona

---

你为什么想要这样做呢？需要注意的一点是，菜单内容并不是从左侧滑动的，它是静态的，而导航是从左侧显示出来的，这让你觉得内容在滑动。 - aleksandar

我需要它从右侧滑动以满足设计要求。 - Nona

Answer 1

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

（正如lmgonzalves建议的那样，将.navigation的HTML代码移到菜单复选框之后，以允许在菜单被选中时使用~同级选择器）

CodePen：http://codepen.io/anon/pen/Nqydvp

- bags

Answer 2

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

我还建议使用开发者工具，如Chrome的检查元素，并通过其响应式操作系统修改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);
}

- Brennen Sprimont

---

谢谢，这个给了一个大致的想法。菜单文本被窗口遮挡。 - Nona

嗯，这边在Chrome上显示正常。 - Brennen Sprimont

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;
}

演示

- lmgonzalves

---

谢谢，我有些不清楚您的解决方案与原 CodePen 有何不同。菜单图标应该在右侧，并且从右侧滑出一个菜单。 - Nona

哦，抱歉，但是在你的问题中，你说你想要“菜单向右滑动”，而不是“从右边滑动”。我有点困惑;) - lmgonzalves

好的，我对问题进行了一些小修改，并点赞了你的答案。感谢你的帮助。 - Nona