[英]How to make this nav open from right to left?
我尝试摆弄此导航的CSS,但无法从右向左打开它。
.hamburger{
$width:25px;
$height:3px;
width:$width;
height:$height;
background:white;
display:block;
position:absolute;
top:50%;
left:50%;
margin-left:-$width/2;
margin-top:-$height/2;
transition:transform 200ms;
}
改变中
transform:translate3d(110px*$i,0,0);
至
transform:translate3d(-110px*$i,0,0);
在以下CSS代码中,使其从右向左打开:
.menu-open:checked~.menu-item{
transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
@for $i from 1 through $menu-items{
&:nth-child(#{$i+2}){
transition-duration:90ms+(100ms*$i);
transform:translate3d(-110px*$i,0,0);
}
}
}
在SCSS末尾的循环中有一个transform:translate3d(110px*$i,0,0);
。
.menu-open:checked~.menu-item{
transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
@for $i from 1 through $menu-items{
&:nth-child(#{$i+2}){
transition-duration:90ms+(100ms*$i);
transform:translate3d(110px*$i,0,0);
}
}
}
将其更改为负值-110px
将使动画从右到左显示。 但是,您还需要更新其他一些CSS,我将留给您。
您需要添加-110px才能向右转
.menu-open:checked~.menu-item{
transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
@for $i from 1 through $menu-items{
&:nth-child(#{$i+2}){
transition-duration:90ms+(100ms*$i);
transform:translate3d(-110px*$i,0,0);
}
}
}
并删除svg。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.