响应菜单使用trunkjs如何使抽屉打开右侧

Responsive menu using trunk js how to make drawer to open right side

本文关键字：何使抽 菜单 trunkjs 响应      更新时间：2023-09-26

嘿，plz检查这个响应菜单我想让抽屉向右移动，但我不知道css动画，有人能建议我做什么吗。这是小提琴

我试着让translate3d-240px抽屉向右移动，但导航消失了。

header.open,
.content.open 
{   
    -webkit-transform: translate3d(240px,0,0);
    -webkit-animation: open .5s ease-in-out;
    -moz-transform: translate3d(240px,0,0);
    -moz-animation: open .5s ease-in-out;
    transform: translate3d(240px,0,0);
    animation: open .5s ease-in-out;
}

我也需要这个，并进行了必要的调整，现在它可以工作了。下面的一些更改，但请检查小提琴的工作代码：http://jsfiddle.net/pkxtj9z1/

.burger {
    float: right;
    right: 10px;
}
nav {
    right: 5px;
}
nav li {
    text-align: right;
}
header.open,
.content.open 
{   
    -webkit-transform: translate3d(-240px,0,0);
    -webkit-animation: open .5s ease-in-out;
    -moz-transform: translate3d(-240px,0,0);
    -moz-animation: open .5s ease-in-out;
    transform: translate3d(-240px,0,0);
    animation: open .5s ease-in-out;
}
@-webkit-keyframes open {
    0%      {-webkit-transform: translate3d(0,0,0);}
    70%    {-webkit-transform: translate3d(-260px,0,0);}
    100%  {-webkit-transform: translate3d(-240px,0,0);}
}
@-moz-keyframes open {
    0%      {-moz-transform: translate3d(0,0,0);}
    70%    {-moz-transform: translate3d(-260px,0,0);}
    100%  {-moz-transform: translate3d(-240px,0,0);}
}
@keyframes open {
    0%      {transform: translate3d(0,0,0);}
    70%    {transform: translate3d(-260px,0,0);}
    100%  {transform: translate3d(-240px,0,0);}
}
相关文章：