[英]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.