Question

对于这个codepen，如果我进行以下修改（用“＆＃39;修改＆＃39;”一词表示注释），唯一发生的事情是汉堡包图标向右移动并从中滑出权利（我想要的）。

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

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

编辑：＆＃34;发生的事情是汉堡包图标向右移动并从右边滑动＃34; - 我的意思是汉堡包图标位于右侧，当我点击它时，它从右侧向左滑动。

Answer 1

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

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

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

Answer 2

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

我还建议使用开发人员工具，如chromes inspect元素，然后通过响应式操作系统修改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 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

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

3 个答案: