如何让这个汉堡包抽屉菜单滑到右边？

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

编辑:"发生的事情是汉堡包图标向右移动并从右侧滑动" - 这意味着汉堡包图标位于右侧,当我点击它时,它从右侧向左滑动.

Answer 1

定位.navigation使用负离屏菜单right值,并设置right:0;当菜单被选中.

(像lmgonzalves建议的那样,将.navigationHTML移到菜单复选框之后,以便在选中菜单时允许使用~兄弟选择器)

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