对于这个 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);
}
编辑: "这种情况发生时,汉堡图标会向右移动并从右侧滑动" - 我的意思是汉堡图标位于右侧,当我点击它时,会从右侧向左滑动。