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

时间:2015-07-01 17:21:26

标签: html css css3 css-transitions

对于这个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);
}

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

3 个答案:

答案 0 :(得分:5)

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

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

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

答案 1 :(得分: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);
}

答案 2 :(得分:2)

可能的解决方案是将.navigation菜单放在inputlabel之后,例如:

<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